5大不传CSS“三栏布局”心法

不二如是

之前陆续有写过：

本讲是升华，不废话，直接上知识点。

要想实现三栏布局（左右固定宽，中间自适应），最常用的就是如下方法：

• float+margin
• position（绝对布局）
• flex（弹性盒子布局）
• table(表格布局)
• Grid(网格布局)
  

咱们官方的课程暂时还没更到这些，B 站有翻译视频，大家可以按需学习：

传送门

进入正题。

基础代码：

游客，如果您要查看本帖隐藏内容请回复

后续只会添加元素和 CSS 样式。


float+margin

html：

<div class="container">
        <div class="left">Left</div>
        <!-- 右栏部分要写在中间内容之前 -->
        <div class="right">Right</div>
        <div class="main">Main</div>
    </div>

样式：

 body,
        html,
        .containerl {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        /*左边栏左浮动*/
        
        .left {
            color: azure;
            float: left;
            height: 100%;
            width: 200px;
            background: #333;
        }
        /*中间栏自适应*/
        
        .main {
            height: 100%;
            margin: 0 200px;
            background: red;
        }
        /*右边栏右浮动*/
        
        .right {
            color: azure;
            float: right;
            height: 100%;
            width: 200px;
            background: #333;
        }

效果：

优点：

快捷、简单、兼容性较好

缺点：

有局限性、脱离文档流、需要清除浮动

position（绝对布局）

html：

 <div class="container">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
    </div>

样式：

body,
        html,
        .container {
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        /*左右进行绝对定位*/
        
        .left,
        .right {
            color: azure;
            position: absolute;
            height: 100%;
            top: 0;
            background: #333;
        }
        
        .left {
            left: 0;
            width: 200px;
        }
        
        .right {
            right: 0;
            width: 200px;
        }
        /*中间用margin空出左右元素所占的空间*/
        
        .main {
            height: 100%;
            margin: 0 200px;
            background: red;
        }
        /*或者中间也进行绝对定位*/
        
        .main {
            position: absolute;
            height: 100%;
            left: 200px;
            right: 200px;
            background: red;
        }

样式：

优点：

简单粗暴

缺点:

脱离文档流、高度未知会出现问题、可用性差

flex（弹性盒子布局）

html：

<div class="container">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
    </div>

样式：

body,
        html {
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        
        .container {
            display: table;
            width: 100%;
        }
        
        .container>div {
            display: table-cell;
        }
        
        .left {
            color: azure;
            width: 200px;
            background: red;
        }
        
        .main {
            background: blue;
        }
        
        .right {
            color: azure;
            width: 200px;
            background: red;
        }

效果：

优点：

兼容性很好（ie8 及以上）、父元素高度会被子元素撑开、不担心高度塌陷

缺点:

seo 不友好、当其中一个单元格高度超出的时候，其他的单元格也是会跟着一起变高的

Grid(网格布局)

<div class="container">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
    </div>

样式：

body,
        html {
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        
        .container {
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            /*设置行高*/
            grid-template-columns: 200px auto 200px;
            /*设置列数属性*/
        }
        
        .left {
            color: azure;
            background: red;
        }
        
        .main {
            background: blue;
        }
        
        .right {
            color: azure;
            background: red;
        }

效果：

优点：

简单强大、解决二维布局问题

缺点:

不兼容 ie9 及以下

---

如果喜欢，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅 ）

tjuwlb

学习

326222539

迷途的羔羊来看看

_2_

来啦

Dawenxi9527

。

tg123

liuzhengyuan

                       
                       
                       
                       

wu道一

1

woaixuexi100

hx.123

学习

dys376820508

学习中

肖迪和

nnn

Rydia

helloworld

ironman2021

.

技术的小白

来学习

253n

学习

一笙彤

1