5种方式实现三栏布局
1.使用float
<style type="text/css">
.useFloat{
margin-top: 10px;
}
.useFloat>div{
height: 100px;
line-height: 100px;
}
.left1{
width: 300px;
float: left;
background-color: #7FFFD4;
}
.right1{
width: 300px;
float: right;
background-color: #FA8072;
}
.center1{
background-color: #FAEBD7;
margin-left: 300px;
margin-right: 300px;
}
</style>
<div class="useFloat">
<div class="left1">使用float的left</div>
<div class="right1">使用float的right</div>
<div class="center1">使用float的center</div>
</div>
2.使用position
<style type="text/css">
.usePosition{
position: relative;
margin-top: 10px;
height: 100px;
}
.usePosition>div{
height: 100px;
line-height: 100px;
}
.left2{
width: 300px;
position: absolute;
left: 0;
background-color: #7FFFD4;
}
.right2{
width: 300px;
position: absolute;
right: 0;
background-color: #FA8072;
}
.center2{
position: absolute;
left: 300px;
right: 300px;
background-color: #FAEBD7;
}
</style>
<div class="usePosition">
<div class="left2">使用position的left</div>
<div class="right2">使用position的right</div>
<div class="center2">使用position的center</div>
</div>
3.使用flex
<style type="text/css">
.useFlex{
margin-top: 10px;
display: flex;
}
.useFlex>div{
height: 100px;
line-height: 100px;
}
.left3{
width: 300px;
background-color: #7FFFD4;
}
.right3{
width: 300px;
background-color: #FA8072;
}
.center3{
flex: 1;
background-color: #FAEBD7;
}
</style>
<div class="useFlex">
<div class="left3">使用flex的left</div>
<div class="center3">使用flex的center</div>
<div class="right3">使用flex的right</div>
</div>
4.使用table
<style type="text/css">
.useTable{
display: table;
width: 100%;
margin-top: 10px;
height: 100px;
line-height: 100px;
}
.useTable>div{
height: 100px;
}
.left4,.center4,.right4{
display: table-cell;
}
.left4{
width: 300px;
background-color: #7FFFD4;
}
.center4{
background-color: #FAEBD7;
}
.right4{
width: 300px;
background-color: #FA8072;
}
</style>
<div class="useTable">
<div class="left4">使用table的left</div>
<div class="center4">使用table的center</div>
<div class="right4">使用table的right</div>
</div>
5.使用grid
<style type="text/css">
.useGrid{
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
margin-top: 10px;
line-height: 100px;
}
.left5{
background-color: #7FFFD4;
}
.center5{
background-color: #FAEBD7;
}
.right5{
background-color: #FA8072;
}
</style>
<div class="useGrid">
<div class="left5">使用grid的left</div>
<div class="center5">使用grid的center</div>
<div class="right5">使用grid的right</div>
</div>
