三栏布局

发表于 | 分类于 | 阅读次数:
字数统计: 759 字 | 阅读时长 ≈ 3 分钟


这里以左右两侧固定宽度300px ，中间部分随浏览器宽度自适应变化为例，总结三栏布局的方法。

基本 HTML :

1
2
3
4
5
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</body>

自身浮动法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
html,body {
    height: 100%;
}

.left,.right {
    width: 300px;
    height: 100%;
    background-color: #5295ff;
}

.left {
    float: left;
}

.right {
    float: right;
}

.main {
    height: 100%;
    margin: 0 300px;
    background-color: #ff6700;
}

这个方法最简单，左侧 float:left ，右侧 float:right ，中间主体实现自适应。不过就是 HTML 布局要将主体部分放在最后，左右栏随意布置。但是中间主体存在克星，clear:both 属性，如果要使用此方法，需避免明显的clear样式。

demo

绝对定位法

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
html {
    height: 100%;
}

body {
    height: 100%;
    position: relative;
}

.left,.right {
    position: absolute;
    background-color: #5295ff;
    width: 300px;
    height: 100%;
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.main {
    height: 100%;
    margin: 0 300px;
    background-color: #ff6700;
}

这个方法是左右两栏通过绝对定位固定在页面两侧，然后为中间的主体栏添加左右 margin 值撑开。这里左中右三栏的 HTML 布局顺序任意。缺点是如果左右两栏盒子高度大于中间盒子，因为绝对定位的关系，会撑不起父盒子的高度，造成高度塌陷。

demo

Flex 布局法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
}

.left,.right {
    width: 300px;
    height: 100%;
    background-color: #5295ff;
}

.right {
    order: 1;
}

.main {
    flex: 1;
    height: 100%;
    background-color: #ff6700;
}

Flex 方法也是简单好用的，不过还是因为兼容性的问题只适应现代浏览器。这里给右侧盒子添加 order:1 属性可以将它排在最后，否则根据上面 HTML 布局顺序，会出现在中间。然后给中间栏设置 flex:1 属性让他占满剩余的空间。

demo

margin 负值法（双飞翼布局）

这个 HTML 代码和上面的方法有些不同。

1
2
3
4
5
6
7
8
9
<body>
    <div class="main">
        <div class="body"></div>
    </div>

    <div class="left"></div>

    <div class="right"></div>
</body>
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
html,body {
    height: 100%;
}

.main {
    width: 100%;
    height: 100%;
    float: left;
}

.body {
    background-color: #ff6700;
    height: 100%;
    margin: 0 300px;
}

.left,.right {
    float: left;
    background-color: #5295ff;
    width: 300px;
    height: 100%;
}

.left {
    margin-left: -100%;
}

.right {
    margin-left: -300px;
}

这个方法 HTML 布局顺序比较讲究，中间栏排第一，剩下左右两栏就比较随意。中间栏要用双层标签，外层宽度与浏览器相同，且浮动，内层设置 margin:0 300px 预留出左右两栏的位置。然后左右两栏设置浮动并通过 margin 负值定位，左栏 margin-left: -100% 刚好将它定位到页面最左侧，右栏 margin-left: -300px 则将它向左位移它本身的宽度定位到页面右侧。

demo

留出空白
-------------本文结束 感谢您的阅读-------------