如上图所示,在PC端,每行三个元素,多余的换行。
HTML
<!-- 设置每行3个元素 -->
<div class="test-wrap">
<ul class="cf more_box experience" id="experience">
<li><img src="https://www.csgo.com.cn/data/images/level01.png" alt="Recruit Rank 1" title="Recruit Rank 1">
<p>新兵-1级</p>
</li>
<li><img src="https://www.csgo.com.cn/data/images/level01.png" alt="Recruit Rank 2" title="Recruit Rank 2">
<p>新兵-2级</p>
</li>
<li><img src="https://www.csgo.com.cn/data/images/level01.png" alt="Recruit Rank 3" title="Recruit Rank 3">
<p>新兵-3级</p>
</li>
<li><img src="https://www.csgo.com.cn/data/images/level01.png" alt="Recruit Rank 4" title="Recruit Rank 4">
<p>新兵-4级</p>
</li>
<li><img src="https://www.csgo.com.cn/data/images/level01.png" alt="Corporal Rank 5"
title="Corporal Rank 5">
<p>下士-5级</p>
</li>
<li><img src="https://www.csgo.com.cn/data/images/level01.png" alt="Corporal Rank 6"
title="Corporal Rank 6">
<p>下士-6级</p>
</li>
<li><img src="https://www.csgo.com.cn/data/images/level01.png" alt="Corporal Rank 7"
title="Corporal Rank 7">
<p>下士-7级</p>
</li>
<ul>
</div>
CSS
ul,
li,
div,
dl,
dt,
dd {
list-style: none;
}
.test-wrap {
width: 800px;
margin: 0 auto;
clear: both;
}
.test-wrap .experience li {
float: left;
width: 236px;
margin: 0 15px 15px 0;
border: 1px solid #272a31;
background-color: #121516;
height: 232px;
position: relative;
}
.test-wrap .experience img {
display: block;
margin: 30px auto 0;
}
.test-wrap .experience p {
height: 46px;
line-height: 46px;
text-align: center;
border-top: 1px solid #272a31;
font-size: 18px;
color: #ccc;
background-color: #1b2026;
display: block;
position: absolute;
bottom: -18px;
left: 0;
width: 100%;
}
实现原理
设置最外层ul
元素的宽度,定义里面每个li
元素的宽度。