Question

如果我想要的话，我可以找到一个解决这个问题的方法，但这似乎是错误的，我正在努力学习以更简洁的方式编写代码。基本上我有一个div有3个图像，div是700px，每个图像是220px，那就是660像素，中心图像的左右两个20px间隙，外面的图像一直到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

使用last-child选择器：

.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 }

将3个图像对齐div，左中右，不均匀边距

3 个答案: