本文总结了三栏布局的几种常用方法，效果如下：
image
其中，左右分别为100px，中间自适应。
1. 浮动
html 代码:
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
css 代码:
.container-float > div {
height: 200px;
}
.container-float > .left {
width: 100px;
background: aliceblue;
float: left;
}
.container-float > .center {
background: antiquewhite;
margin: 0 100px 0 100px;
}
.container-float > .right {
width: 100px;
background: aquamarine;
float: right;
}
缺点：
- 中间栏必须放在最后；
- 窗口缩小时，中间栏可能被覆盖，右边栏也可能被挤到下一行。
2. 绝对定位
html 代码:
<div class="container-absolute">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代码:
.container-absolute {
height: 200px;
position: relative;
}
.container-absolute > div {
height: 200px;
position: absolute;
top: 0;
}
.container-absolute .left {
width: 100px;
background: aliceblue;
left: 0;
}
.container-absolute .center {
background: antiquewhite;
left: 100px;
right: 100px;
}
.container-absolute .right {
width: 100px;
background: aquamarine;
right: 0;
}
缺点：
- 窗口缩小时，中间栏、左边栏可能会被覆盖;
- 使用绝对定位，要考虑与页面其他元素间的关系。
3. flex
html 代码:
<div class="container-flex">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代码:
.container-flex {
height: 200px;
display: flex;
}
.container-flex > div {
height: 200px;
}
.container-flex .left {
width: 100px;
background: aliceblue;
}
.container-flex .center {
background: antiquewhite;
flex: 1;
}
.container-flex .right {
width: 100px;
background: aquamarine;
}
缺点：
- 窗口缩小时，左右两栏宽度可能会改变。
4. table
html 代码:
<div class="container-table">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代码:
.container-table {
height: 200px;
width: 100%;
display: table;
}
.container-table > div {
height: 200px;
display: table-cell;
}
.container-table .left {
width: 100px;
background: aliceblue;
}
.container-table .center {
background: antiquewhite;
}
.container-table .right {
width: 100px;
background: aquamarine;
}
缺点：
- 窗口缩小时，左右两栏宽度可能会改变。
5. grid
html 代码:
<div class="container-grid">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代码:
.container-grid {
height: 200px;
width: 100%;
display: grid;
grid-template-rows: 200px;
grid-template-columns: 100px auto 100px;
}
.container-grid .left {
background: aliceblue;
}
.container-grid .center {
background: antiquewhite;
}
.container-grid .right {
background: aquamarine;
}
6. 圣杯布局
html 代码:
<div class="container-shengbei">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代码:
.container-shengbei {
height: 200px;
padding: 0 100px 0 100px;
}
.container-shengbei > div {
float: left;
position: relative;
height: 200px;
}
.container-shengbei .left {
width: 100px;
background: aliceblue;
margin-left: -100px;
}
.container-shengbei .center {
width: 100%;
background: antiquewhite;
}
.container-shengbei .right {
width: 100px;
background: aquamarine;
right: -100px;
margin-left: -100px;
}
缺点：
- 窗口缩小时，中间栏可能被覆盖，右边栏也可能被挤到下一行。
7. 双飞翼布局
html 代码:
<div class="container-shuangfei">
<div class="center">
<div class="inner">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
css 代码:
.container-shuangfei {
height: 200px;
}
.container-shuangfei > div {
float: left;
position: relative;
height: 200px;
}
.container-shuangfei .left {
width: 100px;
background: aliceblue;
margin-left: -100%;
}
.container-shuangfei .center {
width: 100%;
}
.container-shuangfei .center .inner{
margin: 0 100px 0 100px;
height: 200px;
background: antiquewhite;
}
.container-shuangfei .right {
width: 100px;
background: aquamarine;
margin-left: -100px;
}
缺点：
- 窗口缩小时，中间栏、左边栏都可能被覆盖，整个布局可能会乱。
网友评论