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

不二如是

之前陆续有写过：

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

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

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

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

传送门

进入正题。

基础代码：

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

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


float+margin

html：

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

复制代码

样式：

1. body,
   
2.         html,
   
3.         .containerl {
   
4.             height: 100%;
   
5.             padding: 0;
   
6.             margin: 0;
   
7.         }
   
8.         /*左边栏左浮动*/
   
9.         
   
10.         .left {
    
11.             color: azure;
    
12.             float: left;
    
13.             height: 100%;
    
14.             width: 200px;
    
15.             background: #333;
    
16.         }
    
17.         /*中间栏自适应*/
    
18.         
    
19.         .main {
    
20.             height: 100%;
    
21.             margin: 0 200px;
    
22.             background: red;
    
23.         }
    
24.         /*右边栏右浮动*/
    
25.         
    
26.         .right {
    
27.             color: azure;
    
28.             float: right;
    
29.             height: 100%;
    
30.             width: 200px;
    
31.             background: #333;
    
32.         }

复制代码

效果：

优点：

快捷、简单、兼容性较好

缺点：

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

position（绝对布局）

html：

1. <div class="container">
   
2.         <div class="left">Left</div>
   
3.         <div class="main">Main</div>
   
4.         <div class="right">Right</div>
   
5.     </div>

复制代码

样式：

1. body,
   
2.         html,
   
3.         .container {
   
4.             height: 100%;
   
5.             padding: 0;
   
6.             margin: 0;
   
7.             overflow: hidden;
   
8.         }
   
9.         /*左右进行绝对定位*/
   
10.         
    
11.         .left,
    
12.         .right {
    
13.             color: azure;
    
14.             position: absolute;
    
15.             height: 100%;
    
16.             top: 0;
    
17.             background: #333;
    
18.         }
    
19.         
    
20.         .left {
    
21.             left: 0;
    
22.             width: 200px;
    
23.         }
    
24.         
    
25.         .right {
    
26.             right: 0;
    
27.             width: 200px;
    
28.         }
    
29.         /*中间用margin空出左右元素所占的空间*/
    
30.         
    
31.         .main {
    
32.             height: 100%;
    
33.             margin: 0 200px;
    
34.             background: red;
    
35.         }
    
36.         /*或者中间也进行绝对定位*/
    
37.         
    
38.         .main {
    
39.             position: absolute;
    
40.             height: 100%;
    
41.             left: 200px;
    
42.             right: 200px;
    
43.             background: red;
    
44.         }

复制代码

样式：

优点：

简单粗暴

缺点:

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

flex（弹性盒子布局）

html：

1. <div class="container">
   
2.         <div class="left">Left</div>
   
3.         <div class="main">Main</div>
   
4.         <div class="right">Right</div>
   
5.     </div>

复制代码

样式：

1. body,
   
2.         html {
   
3.             height: 100%;
   
4.             padding: 0;
   
5.             margin: 0;
   
6.             overflow: hidden;
   
7.         }
   
8.         
   
9.         .container {
   
10.             display: table;
    
11.             width: 100%;
    
12.         }
    
13.         
    
14.         .container>div {
    
15.             display: table-cell;
    
16.         }
    
17.         
    
18.         .left {
    
19.             color: azure;
    
20.             width: 200px;
    
21.             background: red;
    
22.         }
    
23.         
    
24.         .main {
    
25.             background: blue;
    
26.         }
    
27.         
    
28.         .right {
    
29.             color: azure;
    
30.             width: 200px;
    
31.             background: red;
    
32.         }

复制代码

效果：

优点：

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

缺点:

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

Grid(网格布局)

1. <div class="container">
   
2.         <div class="left">Left</div>
   
3.         <div class="main">Main</div>
   
4.         <div class="right">Right</div>
   
5.     </div>

复制代码

样式：

1. body,
   
2.         html {
   
3.             height: 100%;
   
4.             padding: 0;
   
5.             margin: 0;
   
6.             overflow: hidden;
   
7.         }
   
8.         
   
9.         .container {
   
10.             display: grid;
    
11.             width: 100%;
    
12.             grid-template-rows: 100px;
    
13.             /*设置行高*/
    
14.             grid-template-columns: 200px auto 200px;
    
15.             /*设置列数属性*/
    
16.         }
    
17.         
    
18.         .left {
    
19.             color: azure;
    
20.             background: red;
    
21.         }
    
22.         
    
23.         .main {
    
24.             background: blue;
    
25.         }
    
26.         
    
27.         .right {
    
28.             color: azure;
    
29.             background: red;
    
30.         }

复制代码

效果：

优点：

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

缺点:

不兼容 ie9 及以下

---

如果喜欢，别忘了评分 ：

                               
登录/注册后可看大图

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

tjuwlb

学习

326222539

迷途的羔羊来看看

_2_

来啦

Dawenxi9527

。

tg123

liuzhengyuan

                       
                       
                       
                       

wu道一

1

woaixuexi100

hx.123

学习

dys376820508

学习中

肖迪和

nnn

Rydia

helloworld

ironman2021

.

技术的小白

来学习

253n

学习

一笙彤

1