CSS实现经典的三栏布局

实现效果：左右栏定宽，中间栏自适应 (有时候是固定高度)

1 . 绝对定位布局：position + margin

1 <div class="container">
2     <div class="left">左</div>
3     <div class="right">右</div>
4     <div class="main">中</div>
5 </div>

 1 body,html{
 2     height: 100%;
 3     padding: 0;
 4     margin: 0;
 5    overflow: hidden;
 6 }
 7     /*左右进行绝对定位*/
 8 .left,.right{
 9     position: absolute;
10     height:100%;  
11     top: 0;
12 }
13 .left{
14     left: 0;
15     width: 100px;
16     background: red;
17 }
18 .right{
19     right: 0;
20     width: 100px;
21     background: blue;
22 }
23     /*中间用margin空出左右元素所占的空间*/
24 .main{
25    height:100%; 
26    margin: 0 100px 100px 0;   /* 也可让 position的 left和right分别为100px;*/
27    background: yellow;
28 }
29

缺点: 如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况

2 . 浮动布局： float + margin

方法类似 position, 改成 float: left 和 float: right即可

.left {
  float: left;
}

.right {
  float: right;
}

.main {
  margin: 0 100px;   // 如不设置margin, main部分将会占满整个父容器
}

3 . flex布局

.container {
  display: flex;
}

.main {
  flex: 1;
}

4 . table 布局

原理：将父容器当作表格，子容器当作表格的单元格。

1 .container {
2    display: table;  
3 }
4 
5 .container > div {
6   display: table-cell;
7 }

5 . grid网格布局

　　父容器设置为网格，网格的子元素行高rows为100px; 网格子元素列宽分别为 100px auto 100px;

1 .container {
2   display: grid;
3   grid-template-rows: 100px;
4   grid-template-columns: 100px auto 100px;  
5 }

6. 圣杯布局（想象成圣杯的主体和两只耳朵）

　　圣杯布局是2006年提出的布局模型概念，在国内由淘宝UED工程师改进并传播，布局要求：

　　1 ）三列布局，中间宽度自适应，两边定宽

　　2 ）中间栏要在浏览器中优先渲染

　　3 ）允许任意列的高度最高

参考

<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>

 1   .container {
 2         padding: 0 150px 0 100px;
 3     }
 4     .left, .main, .right {
 5         position: relative;
 6         min-height: 100px;
 7         float: left;
 8     }
 9     .left {
10         left: -100px;
11         margin-left: -100%;
12         background: green;
13         width: 100px;
14     }
15     .right {
16         right: -150px;
17         margin-left: -150px;
18         background-color: red;
19         width: 100px;
20     }
21     .main {
22         background-color: blue;
23         width: 100%;
24     }

思路：圣杯布局用到了浮动float、负边距、相对定位relative，不添加额外标签

1 . 父容器设置内边距，供两边子容器占位 padding: 0 100px 0 150px;

2 . 所有子容器向左浮动 float: left

3 . 设置左右子容器的负外边距，使所有子容器同一行 .left { margin-left: -100%} .right {margin-left: -150px;} , 此时会有部分重叠

4 . 使用相对定位分别移动左右子容器到父容器的左右内边距留白部分 position: relative; left: -100px; / position: relative; right: -150px;

7. 双飞翼布局(想象成鸟的身体和两只翅膀)

　　1 )　双飞翼布局是对圣杯布局基础上进行修改，将原本的内边距padding 留白改成在自适应栏内部新增DOM节点，并设置其外边距margin

　　2 ) 然后再对左右栏的左外边距设置为负值。比圣杯布局少了position相对定位

　　3 ) 相比圣杯布局，中间栏内容不会被“遮挡”, 圣杯布局使用中间栏的padding给左右栏占位，双飞翼布局使用中间栏子元素的margin给左右栏占位

1 <div class="container"> 
2 　　<div class="main">
3     　　<div class="content">main</div> 
4     </div>
5 　　<div class="left">left</div> 
6 　　<div class="right">right</div> 
7 </div>

 1 .left, .main, .right {
 2         float: left;
 3         min-height: 100px;
 4         text-align: center;
 5     }
 6     .left {
 7         margin-left: -100%;
 8         background: green;
 9         width: 100px;
10     }
11 
12     .right {
13         margin-left: -150px;
14         background-color: red;
15         width: 150px;
16     }
17     .main {
18         background-color: blue;
19         width: 100%;
20     }
21     .content{
22         margin: 0 150px 0 100px;
23     }

基本思路已经理清楚，可以在实践中看效果。

CSS实现经典的三栏布局

猜你喜欢