方案一：float + width 实现
<style>
.col11 {
background-color: hotpink;
}
.col21 {
background-color: lightblue;
}
.col31 {
background-color: green;
}
#parent11 {
/* 负值整体移动 把左边的边框线隐藏起来 */
margin-left: -10px;
width: 100%;
height: 110px;
background: red;
}
#parent11 > div {
float : left;
width : 33.33%;
height : 100px;
border-left : 10px solid #fff;
box-sizing : border-box;
/* 盒子模型
box-sizing:content-box
宽度 = width + border-left/right + padding-left/right
高度 = height + border-top/bottom + padding-top/bottom
box-sizing:border-box
宽度 = width
高度 = height (borde + padding 已经算到宽度中了)
*/
}
</style>
<div id="parent11">
<div class="col11"></div>
<div class="col21"></div>
<div class="col31"></div>
</div>
方案二：table 布局
<style>
#parent33 {
display: table;
width : 100%;
}
#parent33 > div {
display: table-cell;
height : 100px;
}
#parent33 > div:nth-child(2n) {
background-color: greenyellow;
}
#parent33 > div:nth-child(2n+1) {
background-color: gold;
}
</style>
<div id="parent33">
<div class="col13"></div>
<div class="col23"></div>
<div class="col33"></div>
</div>
方案三：flex 实现
<style>
#parent44 {
display: flex;
height : 100px;
}
#parent44 > div {
flex: 1;
}
#parent44 > div:nth-child(2n) {
background-color: greenyellow;
}
#parent44 > div:nth-child(2n+1) {
background-color: gold;
}
</style>
<div id="parent44">
<div class="col14"></div>
<div class="col24"></div>
<div class="col34"></div>
</div>
方案四：Grid 实现
<style>
#parent55 {
display : grid;
grid-template-columns: 1fr 1fr 1fr;
height : 100px;
}
#parent55>div:nth-child(2n) {
background-color: greenyellow;
}
#parent55>div:nth-child(2n+1) {
background-color: gold;
}
</style>
<div id="parent55">
<div class="col15"></div>
<div class="col25"></div>
<div class="col35"></div>
</div>
打赏作者
您的打赏是我前进的动力
微信
支付宝
CSS 高级📦 三列布局实战套路
上一篇
评论
