web 三列布局，左右两列为固定宽度，中间是自适应宽度

最新推荐文章于 2022-10-16 10:00:00 发布

说来世事不如闲

最新推荐文章于 2022-10-16 10:00:00 发布

阅读量250

点赞数

本文链接：https://blog.csdn.net/caopuwisdom/article/details/52744279

版权

要求：三列布局，左右两列为固定宽度，中间是自适应宽度

通过浮动达到的效果如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           body{
               margin: 0;padding: 0;
           }
           .left{
               width: 200px;
               height:500px;
               float: left;
               background:greenyellow ;
           }
           .middle{
               /*width: ;*/ /* 去掉宽度值,因为中间是自适应宽度*/
               height:500px ;
               float:left ;
               background:orange ;
           }
           .right{
               width: 300px;
               height: 500px;
               float: right;
               background: blue;
           }
       </style>
   </head>
   <body>
       <div class="left">200px</div>
       <div clas="middle">魔法向左，科技向右。”
    当程远看到忽然出现在自己面前，带着截然不同气息的两座大门时，傻眼了。
    身为一个新世纪的好青年，程远毫不犹豫地朝左边大门走去。
    “对不起，您的智力过硬，请重新选择……”
    于是，被鄙视的程远只能咬着牙，含着泪，走到了右边……
    从此，华夏出了一个天才，一个与爱因斯坦相提并论的超级天才。 </div>
       <div class="right">300px</div>
   </body>
</html>