html - 在一个 div 中对齐 3 个图像，左中右，边距不均匀

Question

如果我愿意，我可以找到解决这个问题的方法，但这似乎是错误的，我正在尝试以更简洁的方式学习编码。基本上我有一个包含 3 张图片的 div，div 是 700px，每张图片是 220px，所以这是 660 像素，中心图像左右有两个 20 像素的间隙，外部图像一直到 div 的末尾。

有没有不用为每个图像设置单独的 ID 的更快的方法？

.contentpictureblock  { float:left; }

.contentpictureblock  img {
margin-right:20px;
}

<div class="contentpictureblock">
<img src="http://...">
<img src="http://...">
<img src="http://...">
    </div>

执行上面的操作^将第三张图片推到下一行，这是可以理解的。我知道我总是可以为每个图像制作单独的 div，并调整每个图像的边距，但我只是想知道是否有一个更快的一次性溢出类型命令可以应用于上面的命令？这意味着右边距将出现在所有图像上，但不会影响它在最后一张图像中的位置。

感谢您的帮助。

Answer 1

使用最后一个 child 选择器:

.contentpictureblock img {
    margin-right: 20px;
}
.contentpictureblock img:last-child {
    margin-right: 0;
}