CSS —— 5种方式实现三栏布局

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>