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

最新推荐文章于 2023-10-10 15:41:31 发布

SylviaChang

最新推荐文章于 2023-10-10 15:41:31 发布

阅读量3.6k

点赞数 1

分类专栏：表现层CSS 文章标签： div css

本文链接：https://blog.csdn.net/SylviaChang/article/details/71130202

版权

表现层CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

<!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

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