首页 话题 小组 问答 好文 用户 我的社区 域名交易

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

发布于 2024-11-11 19:23:10
0
14

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> 

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

评论
91云脑
Lv.1普通用户

62845

帖子

12

小组

80

积分

站长交流