三栏布局将主页分成3部分左中右,左右定宽,中间自适应
1.浮动实现
兼容好,易实现
左右浮动,再写中间,需要去浮动
<style>
.left {
width: 100px;
height: 100px;
background: lightcoral;
float: left;
}
.right {
width: 100px;
height: 100px;
background: lightskyblue;
float: right;
}
.center {
margin: 0 100px;
height: 100px;
background: mediumpurple;
}
</style>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
2.定位实现
左右分别定位两侧,中间左右margin 和左右宽度一致
脱离文档流,顺序正常
<style>
*{
margin:0;
padding: 0;
}
.left {
width: 100px;
height: 100px;
background: lightcoral;
position: absolute;
left: 0;
right: 0;
}
.right {
width: 100px;
height: 100px;
background: lightskyblue;
position: absolute;
right: 0;
top: 0;
}
.center {
height: 100px;
background: mediumorchid;
margin: 0 100px;
}
</style>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
3.flex实现
<style>
*{
margin:0;
padding: 0;
}
.container {
display: flex;
}
.left {
width: 100px;
height: 100px;
background: lightskyblue;
}
.right {
width: 100px;
height: 100px;
background: orangered;
}
.center {
height: 100px;
background: orchid;
flex: 1;
}
</style>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
网友评论