三栏布局方案(圣杯_双飞翼)

发表于 分类于 / Changyan：

圣杯布局

步骤一 - HTML框架搭建 & 初始化CSS

首先把基本框架搭起来（注意中间部分放最前面）：

1
2
3
4
5
<div class="container">
    <div class="center">我是中间</div>
    <div class="left">我是左边</div>
    <div class="right">我是右边</div>
</div>

接下来是初始化样式。left, right宽度分别设置为100px和200px；然后设置container的 padding-left: 100px + padding-right: 200px 来占据两侧填充；center宽度设为100%，这样能够自适应剩下的宽度。再让所有子元素左浮动。代码如下：

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
.container {
    padding: 0 200px 0 100px; /* 左边100， 右边200*/
    background-color: #e1e1e1;
    height: 300px; /* 为了看效果，给个300px把高度撑起来 */
}

.left, .center, .right {
    float: left;
    height: 100%;
}

.center {
    width: 100%; /* 占据父元素剩下的宽度*/
    background-color: lightblue;
}

.left {
    width: 100px;
    background-color: pink;
}

.right {
    width: 200px;
    background-color: yellow;
}

此时的页面效果：

步骤二 - 让left占据最左列

为了让left能越过center，我们先给它设置一个 -100% 的左边距。这个100%是在container中的宽度，也就是center的宽度：

1
2
3
4
5
6
.left {
    margin-left: -100%;
    width: 100px;
    /*为了看left和center的重叠效果，暂时bgc设为半透明*/
    background-color: rgba(255,204,204,.6);
}

页面效果：

此时，我们已经让left从“第二行”升到了“第一行”，为了让它靠到最左侧，不与center重叠，可以给它设置相对定位，然后给个 left: -100px ，让它定位到container最左侧：

1
2
3
4
5
6
7
8
9
.left {
    /* 设置相对定位 */ 
    position: relative;
    /* 靠到最左侧 */
    left: -100px;
    margin-left: -100%;
    width: 100px;
    background-color: pink;
}

页面效果：

步骤三 - 让right占据最右列

定位好了left，也是时候让right呆在最右边来填充位置了，我们继续使用负margin：

1
2
3
4
5
.right {
    width: 200px;
    margin-right: -200px;
    background-color: yellow;
}

页面效果：

步骤四 - 给container设置min-width

看起来已经实现了不是吗？但我们还差最后一步，给container设置一个 min-width: 100px （就是左列的宽度），否则当浏览器缩小到一定程度时，这个布局可能会被破坏。原因简单来讲就是：“由于设置了相对定位，所以当left原来的位置和right的位置产生重叠时，由于浮动的原因一行放不下就会换行”。所以布局就被打乱了。

1
2
3
4
5
6
.container {
    min-width: 100px;
    background-color: #e1e1e1;
    padding: 0 200px 0 100px;
    height: 300px;
}

完整代码 + 最终效果

这样，我们就实现了圣杯布局，完整代码和效果见下：

双飞翼布局

如果上面圣杯布局你已经理解并自己实践了一遍，那么这里的双飞翼布局你也应该不再话下。跟着我一起撸一遍代码吧。

步骤一 - HTML框架搭建 & 初始化CSS

首先搭建html，仔细观察下方代码你会发现，双飞翼布局在html上面有一点和圣杯布局有差别，那就是双飞翼在center里又套了一个div。到后面你就会知道这样设置的目的。

1
2
3
4
5
<div class="container">
    <div class="center"><div>我是中间</div></div>
    <div class="left">我是左边</div>
    <div class="right">我是右边</div>
</div>

然后编写初始样式。left定宽100；right定宽200；left, right, center全部设置左浮动。其他例如设置颜色高度等等直接看下方代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.container {
    background-color: #e1e1e1;
    height: 300px;
}

.center {
    background-color: lightblue;
}

.left {
    width: 100px;
    background-color: pink;
}

.right {
    width: 200px;
    background-color: yellow;
}

.left, .center, .right {
    float: left;
    height: 100%;
}

效果如下：

步骤二 - 设置center为100%宽

将center的宽度设为100%，这样会把left，right“挤”到第二行：

1
2
3
4
.center {
    width: 100%;
    background-color: lightblue;
}

效果如下：

步骤三 - 分别让left,right回到最左边和最右边

接着，给left设置 margin-left: -100% 回到最左边，给right设置 margin-left: -200px 回到最右边。此时center和left,right都有重叠区域，为了看效果，设置了半透明背景颜色。

1
2
3
4
5
6
7
8
9
10
11
.left {
    width: 100px;
    margin-left: -100%;
    background-color: pink;
}

.right {
    width: 200px;
    margin-left: -200px;
    background-color: yellow;
}

效果如下：

步骤四 - 给center的子div设置左右margin

其实上面的效果图已经实现了三栏布局中间自适应。但有个问题是center左右部分区域会被遮挡，这个时候在步骤一提到的center子div的作用就体现出来了，我们可以给它设置一个左右的margin值，分别等于left的宽和right的宽，消除掉重叠的副作用。

1
2
3
4
.center div {
    /* 左margin100，右margin200 */
    margin: 0 200px 0 100px;
}

效果如下：

步骤五 - 给container设置min-width

最后，给container设置一个min-width，让container最小宽度不小于left宽+right宽

1
2
3
4
5
.container {
    min-width: 300px;
    background-color: #e1e1e1;
    height: 300px;
}

大功告成~

完整代码 + 最终效果