CSS三栏布局实现方法总结

所谓三栏布局指的是：两边固定，中间内容自适应。三栏布局在开发中经常见到，效果如图所示：

三栏布局效果

红色和蓝色部分宽度固定，中间宽度自适应。下面我们用不同的方法实现上面的效果。

1.浮动解决方案

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>实现CSS三栏布局</title>
  <style>
    html *{
        margin:0;
        padding:0;
    }
    article div{
        min-height: 200px;
    }
    .layout{
        margin-top:10px;
    }
</style>
</head>
<body>
   <!-- 1.浮动解决方案 -->
    <section class="layout layout-float">
        <style>
            .left-right-center .left{
                float:left;
                width:300px;
                background: red;
            }
            .left-right-center .right{
                float:right;
                width:300px;
                background: blue;
            }
            .left-right-center .center{
                background: yellow;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h1>浮动解决方案</h1>
                1.这是三栏布局浮动布局的中间部分
            </div>
        </article>
    </section>
</body>
</html>

实现原理：两边使用float固定在左右两侧，留出中间的空白。

优点：结构清晰，实现较为简单，兼容性好。

缺点：

主体内容无法最先加载，当页面内容较多时，影响用户体验。
浮动会脱离文档流，必要时候，需要清除浮动，如果处理不好的话，页面布局会出现问题。

兼容性：所有主流浏览器都支持

2.绝对定位解决方案

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>实现CSS三栏布局</title>
  <style>
    html *{
        margin:0;
        padding:0;
    }
    article div{
        min-height: 200px;
    }
    .layout{
        margin-top:10px;
    }
</style>
</head>
<body>
   <!-- 2.绝对定位解决方案 -->
    <section class="layout layout-absolute">
        <style>
            .layout.layout-absolute .left-center-right>div{
                position:absolute;
            }
            .layout-absolute .left{
                background: red;
                left:0;
                width:300px;
            }
            .layout-absolute .center{
                background: yellow;
                left:300px;
                right:300px;
            }
            .layout-absolute .right{
                background: blue;
                right:0;
                width:300px;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>绝对定位解决方案</h1>
                2.这是三栏布局绝对定位布局的中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>
</body>
</html>

优点：结构简单，快捷，好处理

缺点：使用了绝对定位布局，脱离文档流，下面所有的子元素必须脱离文档流，可使用性差。

兼容性：所有主流浏览器都支持

3.flexbox布局解决方案

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>实现CSS三栏布局</title>
  <style>
    html *{
        margin:0;
        padding:0;
    }
    article div{
        min-height: 200px;
    }
    .layout{
        margin-top:10px;
    }
</style>
</head>
<body>
   <!-- 3.flex布局解决方案 -->
    <section class="layout layout-flex">
        <style>
            .layout.layout-flex .left-center-right{
                display: flex;
            }
            .layout-flex .left{
                width:300px;
                background: red;
            }
            .layout-flex .center{
                background: yellow;
                flex:1;
            }
            .layout-flex .right{
                width:300px;
                background: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>flex解决方案</h1>
                3.这是三栏布局flex布局的中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>  
</body>
</html>

原理：

优点：

结构简单直观
可以结合flex的其他功能实现更多效果，例如使用order属性调整显示顺序，让主题内容优先加载，但展示在中间

缺点：需要IE10以上支持，会产生高度自适应的问题，因为flex分配完剩余空间之后，默认高度会使外层div的高度，比如中间的div撑开高度之后，两边的div也会随着外部div高度的变化而变化

兼容性：如下图所示：

flexbox兼容性

4.表格布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>实现CSS三栏布局</title>
  <style>
    html *{
        margin:0;
        padding:0;
    }
    article div{
        min-height: 200px;
    }
    .layout{
        margin-top:10px;
    }
</style>
</head>
<body>
   <!-- 4.table布局解决方案 -->
    <section class="layout layout-table">
        <style>
            .layout.layout-table .left-center-right{
                display: table;
                width:100%;
                height:200px;
            }
            .layout-table .left-center-right>div{
                display: table-cell;
            }
            .layout-table .left{
                width:300px;
                background: red;
            }
            .layout-table .center{
                background: yellow;
            }
            .layout-table .right{
                background: blue;
                width:300px;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>table布局解决方案</h1>
                4.这是三栏布局table布局的中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>
</body>
</html>

原理：

外层通过display:table设置表格
内层的左中右通过display:table-cell设置为表格单元
左右设置固定宽度，中间设置width:100%填充剩下的宽度

优点：

结构简单直观
table作为一个整体结构兼容性好，相比多个div浮动组合更加稳定

缺点：内层元素展示为table-cell，margin会失效，只能在left-center-right为所有元素设置间隔，或内部增加一层来设置margin

5.网格布局解决方案

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>实现CSS三栏布局</title>
  <style>
    html *{
        margin:0;
        padding:0;
    }
    article div{
        min-height: 200px;
    }
    .layout{
        margin-top:10px;
    }
</style>
</head>
<body>
    <!-- 5.网格布局解决方案 -->
    <section class="layout layout-grid">
        <style>
            .layout-grid .left-center-right{
                display:grid;
                grid-template-rows:100px;
                grid-template-columns:300px auto 300px;
            }
            .left{
                background: red;
            }
            .center{
                background: yellow;
            }
            .right{
                background: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>网格布局解决方案</h1>
                5.这是三栏布局网格布局的中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>
</body>
</html>

原理：通过给父容器设置display:grid;创建一个网格容器，使用grid-template-columns 和 grid-template-rows属性设置网格的列与行的大小
优点：结构简单
兼容性：Grid兼容性
需要下载的童鞋可以移步到：CSS三栏布局的不同实现方法，欢迎Star

版权归作者所有，如有转载，请注明来源