经常碰到一些页面,展示不确定个数的卡片,要求从左往右排列,均匀分布,超出指定个数需要换行,如果一行不满指定个数,仍然从左开始排列。
如果每行个数相同,那使用 flex弹性布局,设置 justify-content: space-between即可,但个数不确定,如果最后一行个数不满,那就跟前面几行的排列样式不一致了。(也可能是我没找对方法)
—— 因此,自己写了一个使用 float浮动➕ calc计算来达到此要求的 css样式,以此记录。
(以每行5个为例,卡片宽度是固定的,如果不固定,也可以变换计算方法来达到目的)
- 页面效果
- HTML代码
<p>一行 不满5个</p>
<div class="wrap">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
</div>
<p>多行 最后一行不满5个</p>
<div class="wrap">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
</div>
<p>多行 最后一行正好5个</p>
<div class="wrap">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>
<div class="card">10</div>
</div>
- CSS代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
padding: 20px;
background-color: #EEEEEE;
}
.wrap {
overflow: hidden;
width: 100%;
padding: 20px;
background-color: goldenrod;
margin-bottom: 20px;
}
.wrap .card {
float: left;
width: 200px;
height: 100px;
padding: 8px;
background: #FFFFFF;
border-radius: 4px;
/* 每5个一行,每个间隔(100%-卡片宽度*5)/4 */
margin-right: calc(25% - 250px);
}
.wrap .card:nth-of-type(5n) {
/* 每行第5个不需要列间隔 */
margin-right: 0;
/* 每行第5个设置行间隔=>不足5个即为最后一行,不需要行间隔 */
margin-bottom: 20px;
}
.wrap .card:last-of-type {
/* 最后1个不需要行间隔=>防止最后一行正好有5个 */
margin-bottom: 0;
}