在CSS中使用相邻选择器的边距 [英] Margin using adjacent selector in css

问题描述

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

图像是默认的静态内联块元素。

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

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

是否有另一种方法来实现这个使用CSS？我的div是流动的，所以我并不想一直使用固定边距。

以下是一个图像示例： http://i54.tinypic.com/w8aogp.png

你可以看到，第二行图像和下面的图像被我想要的图像之间的边距所抵消。当然，我希望他们垂直排列。如果我能以某种方式使用选择器来处理像img之前的隐式换行符并删除边距？

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

解决方案

你的父div有一个可变的宽度，并且你的图像是浮动的，我认为确保图像间距相等的唯一方法是声明 margin：10px （在所有侧面），或者至少在左侧和右侧。这样，无论每行有多少图像，它们总是会正确对齐。

另一方面，如果父 div 具有固定的宽度，并且您确切知道每行有多少图片，您可以为每个X图片插入一个空白的 div ，这将使您的或者你可以创建一个新的分隔符类，比如 .sep ，你可以声明 margin-left：20px; code>并将它分配给除连续第一张图片之外的所有图片。

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

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.

解决方案

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 div has a fixed width and you know exactly how many images per row you have, you can either insert a blank div every X images which will make your current selector work as desired, or you can create a new separator class, say .sep for which you would declare margin-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.

这篇关于在CSS中使用相邻选择器的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！