Question

我正在尝试在绝对定位的div中显示多个图像。 div将文本对齐设置为居中，这很好地将图像放在中心。然后我为图像添加了一个左边距离规则和相邻的兄弟选择器，给它们一些空间，但不会弄乱所有的居中优点。

默认情况下，图像是静态内联块元素。

.mydiv img + img
{
    margin-left:20px;
}

这使我的图像在彼此之间有一点空间。但是，当图像溢出div时，图像堆叠在另一个上面时，边距仍然适用，因此下面的图像不是垂直对齐的。我想这是因为他们仍然是兄弟姐妹，他们只是在视觉上分开。

有没有其他方法可以使用CSS实现这一目标？我的div是流动的，所以我真的不想一直使用固定的边距..

如您所见，第二行图像及其下方被我想要的图像之间的边距所抵消。当然，我希望它们垂直对齐。如果我可以某种方式使用一个选择器，如“img前面有一个隐含的新行”并删除边距？

别介意“顶部”边距 - 无论图像是否与白色容器div直接相邻，它都是固定数字。但是，每当img与容器div直接相邻（视觉上）时，我想将左边距归零。

Answer 1

如果您的父div具有可变宽度，并且您的图像保持浮动，我认为确保图像间距相等的唯一方法是声明margin: 10px（在所有面上），或者至少在左侧和右侧。这样，无论每行有多少图像，它们都将始终正确对齐。

另一方面，如果父div具有固定宽度，并且您确切知道每行有多少图像，则可以在每个X图像中插入一个空白div，这将使您的当前选择器可以根据需要工作，或者您可以创建一个新的分隔符类，例如.sep，您将声明margin-left: 20px;并将其分配给连续的第一个图像以外的所有图像。

除此之外，我认为还没有其他纯CSS 解决方案。