<span style="color: #000000;"> .left{
width: 300px;
height: 500px;
border: 1px solid;
</span><span style="color: #0000ff;">float</span><span style="color: #000000;">: left;
}
.right{
width: 10000px;
height: 500px;
display: table</span>-<span style="color: #000000;">cell;
border: 1px solid;
}
</span></style>
<div class="left"></div>
<div class="right"><span style="color: #000000;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolore est et itaque nesciunt nobis officia omnis optio similique vitae. Cupiditate eum exercitationem harum id iusto maiores quaerat reprehenderit sint.
</span></div>效果如下：
（调整窗口大小，来测试右侧是否根据窗口大小改变）
<span style="color: #008080;"> 1</span> <style>
<span style="color: #008080;"> 2</span> <span style="color: #000000;"> .right{
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;"> width: 200px;
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;"> height: 500px;
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;"> border: 1px solid;
</span><span style="color: #008080;"> 6</span> display: table-<span style="color: #000000;">cell;
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;"> }
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;"> .left{
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;"> height: 500px;
</span><span style="color: #008080;">10</span> <span style="color: #000000;"> border: 1px solid;
</span><span style="color: #008080;">11</span> display: table-<span style="color: #000000;">cell;
</span><span style="color: #008080;">12</span> <span style="color: #000000;"> }
</span><span style="color: #008080;">13</span> <span style="color: #000000;"> .parent{
</span><span style="color: #008080;">14</span> <span style="color: #000000;"> display: table;
</span><span style="color: #008080;">15</span> table-<span style="color: #000000;">layout: fixed;
</span><span style="color: #008080;">16</span> width: 100%<span style="color: #000000;">;
</span><span style="color: #008080;">17</span> <span style="color: #000000;"> }
</span><span style="color: #008080;">18</span> </style>
<span style="color: #008080;">19</span>
<span style="color: #008080;">20</span> <div class="parent">
<span style="color: #008080;">21</span> <div class="left">
<span style="color: #008080;">22</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam, assumenda dolores eaque, fugiat illo, <span style="color: #0000ff;">in</span><span style="color: #000000;"> inventore itaque magni nemo nisi nulla obcaecati quaerat totam unde voluptatem voluptatum. Amet, totam.
</span><span style="color: #008080;">23</span> </div>
<span style="color: #008080;">24</span> <div class="right"></div>
<span style="color: #008080;">25</span> </div>效果如下：
与左侧定宽稍有不同，虽然只是定宽的位置换了，但是不能直接使用浮动像左侧定宽那种方式完成。
蓝色简洁商务公司网站模板使用多种jquery插件制作，首页多达8种风格，DIV+CSS布局，全套模板，包含首页、关于我们、团队、服务、工作流程、褒奖、联系我们、定价、常见问题、左侧导航、右侧导航、全宽、设计作品、图片展示、博客、按钮和图标、地图、内容滑块、视频、价格表、标签切换等网站模板页面。
30
<style><span style="color: #000000;">
.parent{
display: table;
table</span>-<span style="color: #000000;">layout: fixed;
width: </span>100%<span style="color: #000000;">;
}
div{
border: 1px solid;
}
.left,.right,.center{
display: table</span>-<span style="color: #000000;">cell;
}
.left{
width: 100px;
height: 200px;
}
.right{
width: 100px;
height: 200px;
}
</span></style>
<div class="parent">
<div class="left"></div>
<div class="center"><span style="color: #000000;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet delectus ducimus ea eos eum, libero modi quia, soluta temporibus unde, <br /> ut. Aliquam, dolorem ipsam porro quae quisquam saepe vitae</span>!
</div>
<div class="right"></div>
</div>效果如下：
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
622
收藏
