实现三个并排div，两边固定宽度，中间自适应的四个方法

来源：互联网发布：淘宝微能量运动旗舰店编辑：程序博客网时间：2024/05/16 19:56

看了些文档和网上的资源，大概有四种方法。如有错误，欢迎各位指正。以下先贴代码再来解释

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>三个div并排</title>    <style>        *{            margin: 0px;            padding: 0px;        }        .container{            width:500px;            height:200px;            margin: 10px auto;        }        .left,        .right{            width: 100px;            height: 100%;            background-color: antiquewhite;        }        .center{            background-color: aquamarine;        }        /*方法一：float*/        .float .left{            float: left;        }        .float .right{            float: right;        }        .float .center{            height: 100%;            margin: 0px 100px;        }        .float .container:after{            display: block;            content: "";            height: 0px;            clear: both;            overflow: hidden;            zoom: 1;        }        /*方法二：position法*/        .position{            position: relative;        }        .position .left{            position: absolute;            top: 0px;            left: 0px;        }        .position .right{            position: absolute;            top: 0px;            right: 0px;        }        .position .center{            height: 100%;            margin: 0px 100px;        }        /*方法三：flex*/        .flex{            display: flex;            flex-direction: row;        }        .flex .left,.right{            flex-basis: 100px;            -webkit-flex-basis: 100px;        }        .flex .center{            flex-grow: 1;        }        /*方法四：table法*/        .table{            display: table;        }        .table .inner{            display: table-cell;        }    </style></head><body><p>实现三个并排div，两边固定宽度，中间自适应的四个方法</p><div class="container float">    <div class="left"></div>    <div class="right"></div>    <div class="center">方法一：float法</div></div><div class="container position">    <div class="left"></div>    <div class="center">方法二：position法</div>    <div class="right"></div></div><div class="container flex">    <div class="left"></div>    <div class="center">方法三：flex法</div>    <div class="right"></div></div><div class="container table">    <div class="left inner"></div>    <div class="center inner">方法四：table法</div>    <div class="right inner"></div></div></body></html>

方法一：float法。想必用得挺多，使左右两边的div分别向左/右浮动，脱离正常流。注意把中间div放在最后，最后清楚浮动即可。

方法二：position法。父级div相对布局，然后左右div针对父级决定布局，中间自适应。

方法三：flex法。display:flex;是css3新出的弹性盒模型。用flex-diretion:row;决定父级div主轴方向为水平铺开。flex-basis;让左右div占据主轴100px。flex-grow定义中间div的放大比例为1，适应剩下的宽度

方法四：table法。也是css3新出的属性。

附：关于flex法，可参考的链接有：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.w3cplus.com/css3/flexbox-basics.html

http://blog.csdn.net/linda_417/article/details/51507176

此文为个人总结，后续还会补充。

0 0