假如網(wǎng)頁(yè)要呈現(xiàn)如下的等邊距排列，那么用 float 是非常簡(jiǎn)單的方法。
實(shí)現(xiàn)代碼
Paste_Image.png
HTML
<body>
<div class="layout">
<div id="header">風(fēng)景列表</div>
<div id="main">
<ul>
<li>
<div class="img"></div>
<p>風(fēng)景如畫(huà)</p>
</li>
<li>
<div class="img"></div>
<p>風(fēng)景如畫(huà)</p>
</li>
<li>
<div class="img"></div>
<p>風(fēng)景如畫(huà)</p>
</li>
<li>
<div class="img"></div>
<p>風(fēng)景如畫(huà)</p>
</li>
<li>
<div class="img"></div>
<p>風(fēng)景如畫(huà)</p>
</li>
<li>
<div class="img"></div>
<p>風(fēng)景如畫(huà)</p>
</li>
</ul>
</div>
</div>
</body>
CSS
ul:after{
content: "";
display: block;
clear: both;
}
.layout{
width: 640px;
margin: 0 auto;
text-align: center;
}
#header{
padding: 5px;
color: #666;
font-size: 2rem;
font-weight: bold;
border-bottom: 1px solid #ccc;
}
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
li{
width: 200px;
height: 200px;
float: left;
margin-left: 20px;
margin-top: 20px;
box-shadow:
0 8px 16px 0 rgba(0, 0, 0, 0.2),
0 16px 20px 0 rgba(0, 0, 0, 0.16);
}
ul{
margin-left: -20px;
}
li .img{
width: 200px;
height: 150px;
background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/283a4100-10cd-4208-a3b5-4030ec03acf6) ;
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.75;
}
