Маржа с использованием смежного селектора в CSS - PullRequest
Новая
       2

Маржа с использованием смежного селектора в CSS

2 голосов
/ 03 октября 2010

Я пытаюсь отобразить несколько изображений в абсолютно позиционированном div.Div имеет text-align установлен в центр, который приятно помещает изображения в центр.Затем я добавил правило margin-left с соседним селектором для изображений, чтобы дать им немного места, но не испортить все центрирующее качество.

Изображения являются статическими элементами inline-block согласнодефолт.

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

Это дает моим изображениям немного пространства между друг другом.Однако, когда изображения накладываются друг на друга, когда они переполняют div, поле все равно применяется, так что изображение ниже не выровнено по вертикали.Я думаю, это потому, что они все еще братья и сестры, они только визуально разделены.

Есть ли другой способ добиться этого с помощью CSS?Мой div жидкий, поэтому я не хочу использовать фиксированные поля полностью ..

Вот пример изображения: http://i54.tinypic.com/w8aogp.png

Как вы можете видеть, вторая строкаизображений и ниже смещен на поле, которое я хочу между изображениями.Конечно, я бы хотел, чтобы они были выровнены по вертикали.Если бы я мог как-то использовать селектор для чего-то вроде «img, которому предшествует неявная новая строка» и убрать поле?

Не берите в голову «верхнее» поле - это будет фиксированное число, независимо от того,непосредственно рядом с белым контейнером div или нет.Тем не менее, я хочу обнулить левое поле всякий раз, когда img непосредственно (визуально) находится рядом с контейнером div.

1 Ответ

1 голос
/ 03 октября 2010

Если ваш родительский div имеет переменную ширину, а ваши изображения остаются плавающими, я думаю, что единственный способ убедиться, что ваши изображения расположены на одинаковом расстоянии, - объявить margin: 10px (со всех сторон) или, по крайней мере, налевая и правая сторона.Таким образом, независимо от того, сколько изображений у вас в строке, они всегда будут правильно выровнены.

С другой стороны, если родительский элемент div имеет фиксированную ширину и вы точно знаете, сколько изображений в строкеу вас есть, вы можете вставить пустое div каждое X-изображение, которое заставит ваш текущий селектор работать, как вам нужно, или вы можете создать новый класс разделителя, скажем .sep, для которого вы бы объявили margin-left: 20px; и назначить еговсе, кроме первого изображения подряд.

Кроме этого, я не думаю, что есть какие-либо другие чистые решения CSS .

...