前言
在PC端系统中,三栏布局是很常见的。那么有哪些方式来实现三栏布局呢。
flex布局
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
.box {
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
display: flex;
}
.left {
width: 200px;
background-color: pink;
}
.center {
flex: 1;
background-color: orange;
}
.right {
width: 200px;
background-color: skyblue;
}
float布局
这里有个主意点,right的div必须在center前,不然右边会塌陷。
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
.box {
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
}
.left {
float: left;
background: red;
}
.center {
background: orange;
}
.right {
float: right;
background: skyblue;
}
同时要注意div的特点
- 空的div是没有高度的。
- div的高度由其内容决定
- 如果没有指定float属性,div的宽度等于其父元素的宽度(不管是否有内容)
- 如果指定了float属性,div的宽度取决于内部圆度的宽度(空的div指定了float属性后既没有宽度也没有高度)
postion布局
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
.box {
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
position: relative;
}
.left {
position: absolute;
left: 0;
width: 200px;
background-color: pink;
}
.center {
background-color: orange;
}
.right {
position: absolute;
right: 0;
width: 200px;
background-color: skyblue;
}
table布局
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
.box {
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
display: table;
}
.left {
display: table-cell;
background: pink;
width: 400px;
height: 100%;
}
.center {
display: table-cell;
background: orange;
height: 100%;
}
.right {
display: table-cell;
background: skyblue;
width: 400px;
height: 100%;
}
网格布局
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
.box {
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
display: grid;
grid-template-columns: 200px auto 200px;
}
.left {
background: pink;
}
.center {
background: orange;
}
.right {
background: skyblue;
}
网友评论