CSS可以很方便地将一组图片按照自己的需要排列。我们可以使用CSS来将8张图片分为两行或者二行来进行展示。/ 分为两行 / img { width: 200px; height: 200px; dis...
CSS可以很方便地将一组图片按照自己的需要排列。我们可以使用CSS来将8张图片分为两行或者二行来进行展示。
/* 分为两行 */
img {
width: 200px;
height: 200px;
display: inline-block;
margin-right: 20px;
margin-bottom: 20px;
}
/* 第一行 */
.first-row img {
margin-right: 0;
}
/* 第二行 */
.second-row img {
margin-right: 0;
}
上面的CSS代码将所有的图片设定为200px的宽高,并且使用inline-block属性来实现水平排列。每行图片之间使用20px的间距。
如果要将8张图片分为两行,我们可以使用class来为第一行和第二行的图片分别添加一个class,使用相同的CSS样式对其进行控制。
<div class="first-row">
<img src="img1.jpg"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
<img src="img4.jpg"/>
</div>
<div class="second-row">
<img src="img5.jpg"/>
<img src="img6.jpg"/>
<img src="img7.jpg"/>
<img src="img8.jpg"/>
</div>
以上是实现分为两行的代码示例。如果需要分成二行,我们可以类比以上代码来进行设计即可。