[分享]css两排图片布局

CSS是网页设计中不可或缺的一部分，它可以让我们更好地控制网页的布局和样式。今天我们来谈一谈如何使用CSS实现两排图片布局。首先，在HTML中我们需要使用两个div来分别表示两排图片，如下所示： ...

CSS是网页设计中不可或缺的一部分，它可以让我们更好地控制网页的布局和样式。今天我们来谈一谈如何使用CSS实现两排图片布局。

首先，在HTML中我们需要使用两个div来分别表示两排图片，如下所示：

<div class="row1">
    <img src="image1.jpg" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
</div>

<div class="row2">
    <img src="image4.jpg" />
    <img src="image5.jpg" />
    <img src="image6.jpg" />
</div> 

我们在上面的HTML代码中给两个div分别添加了一个class，这样我们可以通过class来选择这两个div并添加CSS样式。接下来就是添加CSS样式的过程。

.row1 {
    text-align: center;
}
.row1 img {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 20px;
}

.row2 {
    text-align: center;
}
.row2 img {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 20px;
} 

上面的CSS代码中，我们给两个div分别设置了水平居中的样式，然后给每个img标签设置了inline-block属性，使它们能够在同一行中显示。接着设置了margin-right和margin-bottom属性来控制图片之间的距离。

现在打开浏览器，我们就可以看到两排图片已经被布局好了。

上面就是使用CSS实现两排图片布局的整个过程，希望对大家有所帮助。