三栏布局

Posted on | Edited on | In

1.流体布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>       
</div>
<style>
    .left{
        width: 200px;
        height: 200px;
        float: left;
        background-color: yellow;
    }
    .right{
        width: 200px;
        height: 200px;
        float: right;
        background-color: red;
    }
    .main{
        margin:auto 200px;
        height: 200px;
        background-color: blue;
    }
</style>

如上，流体布局就是对左右盒子float属性，中间盒子设置margin。

效果可看codepen

注意：right要放在main之前，不然right会挤到下一行。（这也是缺点：主要内容无法最先加载，当页面内容较多时会影响用户体验。）

2.BFC三栏

关于BFC，可以看- 前端精选文摘：BFC 神奇背后的原理。

1
2
3
4
5
6
7
<style>
    .main{
        overflow: hidden;
        height: 200px;
        background-color: blue;
    }
</style>

由于BFC区域不会与float元素重叠这一特性，可以借此实现三栏。

和流体布局相比，把 margin 改变成 overflow 就行了。虽然display和position也能产生BFC，但宽度为0，在这里不能用。

效果：codepen

但这种实现具有和流体布局相同的缺点：right要在main之前，主要内容无法最先加载。除此之外，overflow会把溢出元素隐藏。

3.双飞翼布局 ： main单独包裹

双飞翼解决了上面两个的缺点，把main放在首位加载。

main被包裹在 container 中，而 container 和 左右盒子同级浮动，利用 margin 负值，把左右盒子从下一行移上来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 <div class="container">
    <div class="main"></div>
 </div> 
 <div class="left"></div>
<div class="right"></div>
<style>
 .container{
    float:left;
    width:100%;
  }
  .left ,.right ,.main{
    height:200px;
  } 
  .left{
    float:left;
    width:20%;
    background-color: yellow;
    margin-left:-100%
  }
  .right{
    width:20%;
    background-color: red;
    margin-left:-20%;
    float: right;
  }
  .main{
    margin-left:20%;
    margin-right:20%;
    background-color: blue;
  }
</style>

利用 container 、left、right 的float属性，left和right设置margin为负值，其中left的margin：-100%代表与container齐平，right的margin：-20%表示自己的宽度。

main放在container里面，两边加上margin。

效果：codepen

4.圣杯布局：父级padding，左右position

圣杯布局和双飞翼有类似之处，都用margin 负值将 left和right 定位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 <div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
 </div> 

.container{
   overflow:hidden;
   padding:0 200px;
 }
 .left ,.right ,.main{
    height:200px;
 } 
 .left{
    float:left;
    width:200px;
    background-color: yellow;

    <!-- 左盒子才可以往最左边移动 -->
    margin-left:-100%;
    position:relative;
    left:-200px;
  }
  .right{
    width:200px;
    background-color: red;

    <!-- 右盒子才可以往上移动 -->
    margin-left:-200px;
    float: left;

    <!-- 左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值 -->
    position:relative;
    right:-200px;
  }
  .main{
    float:left;
    width:100%;
    background-color: blue;
  }

codepen

和双飞翼不同的是，圣杯main和left、right元素是同级的。

主要利用父级元素设置左右内边距padding的值，把父级的三个子盒子往中间挤。然后给左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值。

圣杯不能设置left和right的值为百分比：因为父元素有padding，父元素的content宽已经不是整个页面的宽度。如果left和right盒子设置百分度，他们的宽度便不正确。可以看:错误的效果。

圣杯的详细实现过程：圣杯布局。

5.Flex布局

利用flex的 flex-grow：1，让main盒子动态适应;left盒子利用 order:-1，将其放到第一位（order越小越前面）。flex很简洁，效果：codepen

具体实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 <div class="container">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
 </div> 

 <!-- css -->
.container {
    display: flex;
}
.main {
    flex-grow: 1;
	height: 300px;
	background-color: red;
}
.left {
	order: -1;
	flex: 0 1 200px;
	height: 300px;
	background-color: blue;
	}
.right {
	flex: 0 1 100px;
	height: 300px;
	background-color: green;
}