在CSS中使用相邻选择器的边距

Question

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.

Answer 1

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.