三列布局（两边定宽，中间自适应）

最新推荐文章于 2022-07-22 09:05:20 发布

wenmin1987

最新推荐文章于 2022-07-22 09:05:20 发布

阅读量291

点赞数

文章标签：三列布局两边定宽中间自适应

本文链接：https://blog.csdn.net/wenmin1987/article/details/88210966

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>两边定宽，中间自适应</title>
       <style type="text/css">
           *{margin: 0;padding: 0;}
body{min-width: 700px;}
           /*html,body{ margin: 0px;width: 100%; }*/
           h3{height: 100px;margin:20px 0 0;}

           /*绝定定位法：最好是center的div放最后*/
           /*#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
           #left{left:0px;}
           #right{right: 0px;}
           #center{margin:2px 210px ;background-color: #eee;height: 200px; }*/

           /*浮动法：center的div放最后，这种方法浏览器非常小的时候，最右边的会被挤下去*/
           /*#left,#right{ width: 200px;height: 200px; background-color: #ffe6b8 }
           #left{float: left;}
           #right{float: right;}
           #center{margin: 0 210px;height: 200px; background-color: #a0b3d6}*/

           /*双飞翼布局：即负margin+float：left注意：center必须放最前面且必须包裹一个自己父级div；left，right依次*/
           /*#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
           #wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
           #left,#right{ float: left;width: 200px;height: 100px;background-color: darkorange }
           #left {margin-left: -100%; background-color: lightpink}
           #right{margin-left: -200px;}*/

           /*圣杯布局:负margin+padding+float：left+relative，注意：容器container里的center最前，left，right依次*/
           #left,#center,#right{ position: relative;float: left;min-height: 130px;}
            #container{padding:0 220px 0 200px;overflow: hidden;}
       #left{margin-left: -100%;left: -200px;width: 200px;background: red;}
       #right{margin-left: -220px;right: -220px;width: 220px;background: green;}
#center{ width: 100%;background: blue;word-break: break-all;}

           /*flex布局：整个父级div 定义flex，里面left center right的div顺序，center的flex定义为1*/
           /*#box{width:100%;display: flex; height: 100px;margin: 10px;}
           #left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}
           #center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}*/

       </style>
   </head>
   <body>

       <h3>圣杯布局</h3>
       <div id="container">
          <div id = "center">我是中间</div>
           <div id = "left">我是左边</div>
           <div id = "right">我是右边</div>
       </div>

</body>
</html>

wenmin1987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三列布局（两边定宽，中间自适应）

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;两边定宽，中间自适应&lt;/title&gt; &lt;style type="text/css"&gt; *{margin: 0;...
复制链接

扫一扫