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

Question

如果我愿意，我可以找到解决此问题的方法，但这似乎是错误的，并且我正在尝试以更简洁的方式学习编码。基本上我有一个 div，里面有 3 个图像，div 是 700px，每个图像是 220px，所以这就是 660px，中间图像左右有两个 20px 的间隙，而外部图像一直到它们的末端分区。

有没有更快的方法来做到这一点，而无需为每个图像设置单独的 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

使用最后一个子选择器：

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

Answer 2

使用附加类修改最后一个图像：

<img src="..." class="last">

CSS 规则：

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

Answer 3

div.contentpictureblock 上的负边距也可以。如果您有可能拥有超过 3 张图像，那么这就是您想要做的。

div.contentpictureblock { margin-left: -20px; overflow: hidden }