在 css 中使用相邻选择器的边距
我正在尝试在绝对定位的 div 中显示多个图像。 div 将文本对齐设置为居中，这很好地将图像置于中心。然后，我为图像的相邻同级选择器添加了左边距规则，为它们提供了一点空间，但又不会弄乱所有居中的优点。
默认情况下，图像是静态内联块元素。
.mydiv img + img
{
margin-left:20px;
}
这让我的图像彼此之间有一点空间。但是，当图像溢出 div 时堆叠在另一个图像的顶部时，边距仍然适用，因此下面的图像不会垂直对齐。我想这是因为他们仍然是兄弟姐妹，他们只是在视觉上分开。
有没有其他方法可以使用 CSS 来实现此目的？我的 div 是液体，所以我真的不想一直使用固定边距。
这是一个示例图像： http://i54.tinypic.com/w8aogp.png
如您所见，第二行及下面的图像偏移了我想要的图像之间的边距。当然，我希望它们垂直对齐。如果我可以以某种方式使用选择器来表示“img 前面有隐式换行符”并删除边距？
不用介意“顶部”边距 - 无论图像是否直接与白色容器 div 相邻，它都将是一个固定数字。但是，每当 img 直接（视觉上）与容器 div 相邻时，我想将左边距归零。
I'm trying to display a number of images in an absolutely positioned div. The div has text-align set to center, which nicely puts the images in the center. I then added a margin-left rule with the adjacent sibling selector for the images, to give them a bit of space, but not messing up all the centering goodness.
Images are static inline-block elements, as per default.
.mydiv img + img
{
margin-left:20px;
}
This give my images a bit of space between eachother. However, when the images gets stacked on top of another when they overflow the div, the margin still applies, so that the image below is not vertically aligned. I guess this is because they are still siblings, they are only visually separated.
Is there another way to achieve this using CSS? My div is liquid, so I don't really want to use fixed margins all the way..
Here is an example image: http://i54.tinypic.com/w8aogp.png
As you can see, the second row of images and below is offset by the margin I want between images. I would like them to align vertically, of course. If I could somehow use a selector for something like "img preceded by an implicit new-line" and remove the margin?
Never mind the "top" margin - it will be a fixed number regardless if the image is directly adjacent to the white container div or not. However, I want to zero the left-margin whenever an img is directly adjacent (visually) to the container div.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您的父 div 具有可变宽度，并且您的图像保持浮动，我认为确保图像等距的唯一方法是声明
margin: 10px（在所有边上），或者，至少在左侧和右侧。这样，无论每行有多少图像，它们都将始终正确对齐。另一方面，如果父
div具有固定宽度，并且您确切知道每行有多少图像，则可以在每个 X 图像中插入一个空白div将使您当前的选择器按需要工作，或者您可以创建一个新的分隔符类，例如.sep，您将为其声明margin-left: 20px;并将其分配给除连续第一张图像外的所有图像。除此之外，我认为没有任何其他纯 CSS 解决方案。
If your parent div has a variable width, and your images are left floated, I think the only way to make sure your images are equally spaced is to declare
margin: 10px(on all sides), or, at least on the left and right side. That way, regardless of how many images you have per row, they will always be properly aligned.On the other hand, if the parent
divhas a fixed width and you know exactly how many images per row you have, you can either insert a blankdivevery X images which will make your current selector work as desired, or you can create a new separator class, say.sepfor which you would declaremargin-left: 20px;and assign it to all but the first image in a row.Other than that, I don't think there are any other pure CSS solutions.