[分享]css中8张图片分为两行二行

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> 

以上是实现分为两行的代码示例。如果需要分成二行，我们可以类比以上代码来进行设计即可。