css布局之三列布局

题：实现左中右三列，其中左右两列宽度已知为200px，中间宽度自适应。
答：五种常用解决方案。float，position，flex，table，grid。
注意：若要求等高且高度已知，只需给定高度。若高度未知，只能使用flex，table，grid三种解决方案。
参考地址：https://cloud.tencent.com/developer/article/1195967。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-columns</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        section {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<!--float实现三列布局-->
<!--优点：实现简单，兼容性好-->
<!--缺点：脱离文档流，另外需要注意清除浮动-->
<section class="float-3-columns">
    <style>
        .float-3-columns .left {
            float: left;
            width: 200px;
            background: green;
        }
        .float-3-columns .right {
            float: right;
            width: 200px;
            background: blue;
        }
        .float-3-columns .main {
            background: red;
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
    <article class="wrap">
        <div class="left">left content</div>
        <div class="right">right content</div>
        <div class="main">
            <p>main content</p>
            <p>main content</p>
            <p>main content</p>
        </div>
    </article>
</section>
<!--absolute实现三列布局-->
<!--优点：实现简单，兼容性好-->
<!--缺点：脱离文档流，影响很大-->
<section class="absolute-3-columns">
    <style>
        .absolute-3-columns .wrap {
            position: relative;
        }
        .absolute-3-columns .left {
            position: absolute;
            left: 0;
            background: green;
            width: 200px;
        }
        /*如果main在right前必须要加top:0,main在right后则不需要*/
        .absolute-3-columns .right {
            position: absolute;
            right: 0;
            top: 0;
            background: blue;
            width:200px;
        }
        .absolute-3-columns .main {
            background: red;
            margin-left: 200px;
            margin-right: 200px
        }
    </style>
    <article class="wrap">
        <div class="left">left content</div>
        <div class="main">
            <p>main content</p>
            <p>main content</p>
            <p>main content</p>
        </div>
        <div class="right">right content</div>
    </article>
</section>
<!--flex实现三列布局-->
<!--优点：简单，适用性强，专门用于布局-->
<!--缺点：兼容性-->
<section class="flex-3-columns">
    <style>
        .flex-3-columns .wrap{
            display: flex;
        }
        .flex-3-columns .left {
            width: 200px;
            background: green;
        }
        .flex-3-columns .right {
            width: 200px;
            background: blue;
        }
        .flex-3-columns .main {
            flex: 1;
            background: red;
        }
    </style>
    <article class="wrap">
        <div class="left">left content</div>
        <div class="main">
            <p>main content</p>
            <p>main content</p>
            <p>main content</p>
        </div>
        <div class="right">right content</div>
    </article>
</section>
<!--grid实现三列布局-->
<!--优点：简单，适用性强，专门用于布局-->
<!--缺点：兼容性-->
<section class="grid-3-columns">
    <style>
        .grid-3-columns .wrap {
            display: grid;
            grid-template-columns: 200px auto 200px;
        }
        .grid-3-columns .left {
            background: green;
        }
        .grid-3-columns .right {
            background: blue;
        }
        .grid-3-columns .main {
            background: red;
        }
    </style>
    <article class="wrap">
        <div class="left">left content</div>
        <div class="main">
            <p>main content</p>
            <p>main content</p>
            <p>main content</p>
        </div>
        <div class="right">right content</div>
    </article>
</section>
<!--table实现3列布局-->
<!--优点：兼容性好-->
<!--缺点：特性比较复杂-->
<section class="table-3-columns">
    <style>
        /*tableb默认宽度自适应，需要加width:100%*/
        .table-3-columns .wrap {
            display: table;
            width: 100%;
        }
        .table-3-columns .left {
            display: table-cell;
            width: 200px;
            background: green;
        }
        .table-3-columns .right {
            display: table-cell;
            width: 200px;
            background: blue;
        }
        .table-3-columns .main {
            display: table-cell;
            background: red;
        }
    </style>
    <article class="wrap">
        <div class="left">left content</div>
        <div class="main">
            <p>main content</p>
            <p>main content</p>
            <p>main content</p>
        </div>
        <div class="right">right content</div>
    </article>
</section>
</body>
</html>
css布局之三列布局

猜你喜欢
