等分布局:(自适应)
第一种:子盒子使用float + width 百分比
#container {
height: 300px;
}
.box {
width: 25%;
height: 300px;
float: left;
text-align: center;
line-height: 300px;
}
<div id="container">
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
展示结果:
第一种方案改善:(中间出现等宽间距)
#container {
height: 300px;
margin-left:-10px;
}
.box {
width: 25%;
height: 300px;
box-sizing: border-box; // 关键点
padding-left: 10px; // 关键点 左右间隙
margin-bottom: 20px; // 关键点 上下间隙
float: left;
text-align: center;
line-height: 300px;
}
.box:nth-child(2n) .inner {
background-color: blueviolet;
}
.box:nth-child(2n-1) .inner {
background-color: aqua;
}
<div id="container">
<div class="box">
<div class="inner">2313</div>
</div>
<div class="box">
<div class="inner">2313</div>
</div>
<div class="box">
<div class="inner">2313</div>
</div>
<div class="box">
<div class="inner">2313</div>
</div>
<div class="box">
<div class="inner">2313</div>
</div>
<div class="box">
<div class="inner">2313</div>
</div>
<div class="box">
<div class="inner">2313</div>
</div>
<div class="box">
<div class="inner">2313</div>
</div>
</div>
展示效果:
第二种:采用table table-cell实现
#container {
display: table;
width: 100%;
/* 这里要人为设置width,否则width为0,只有使用display:talbe 等分布局时是应用 */
}
.box {
display: table-cell;
height: 300px;
text-align: center;
line-height: 300px;
}
.box:nth-child(2n) {
background-color: blueviolet;
}
<div id="container">
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
展示结果:
第三种方flex布局(中间出现等宽间距):
#container {
display: flex;
align-items: center;
justify-content: space-evenly;
flex-wrap: wrap; //设置允许换行
}
.box {
width: 300px;
height: 300px;
margin-bottom: 20px;
text-align: center;
line-height: 300px;
}
.box:nth-child(2n) .inner {
background-color: blueviolet;
}
.box:nth-child(2n-1) .inner {
background-color: aqua;
}
<div id="container">
<div class="box">
<div class="inner">2313</div>
</div>
<div class="box">
<div class="inner">2313</div>
</div>
<div class="box">
<div class="inner">2313</div>
</div>
<div class="box">
<div class="inner">2313</div>
</div>
<div class="box">
<div class="inner">2313</div>
</div>
<div class="box">
<div class="inner">2313</div>
</div>
<div class="box">
<div class="inner">2313</div>
</div>
<div class="box">
<div class="inner">2313</div>
</div>
</div>
展示效果: