页面效果
1.利用float和margin
.box {
width: 100%;
}
.one,
.two,
.three,
.forth {
width: 20%;
height: 100px;
float: left;
margin: 10px 2%;
text-align: center;
line-height: 100px;
}
2.flex盒子
.box {
width: 100%;
display: flex;
justify-content: space-around;
text-align: center;
line-height: 100px;
}
.one,
.two,
.three,
.forth {
width: 20%;
height: 100px;
}
3.利用table,table-cell属性
.box {
width: 100%;
text-align: center;
line-height: 100px;
display: table;
}
.one,
.two,
.three,
.forth {
height: 100px;
display: table-cell;
}
4.利用 bootstrap栅格布局
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>