Как установить расстояние между плавающими div?

У меня есть родительский div, который может изменить его размер, в зависимости от доступного пространства. Внутри этого div у меня есть плавающие div. Теперь я хотел бы иметь промежуток между этими div, но не имеет места для родительского div (см. Рисунок).

Есть ли способ сделать это с помощью CSS?

Спасибо

Ответы

Ответ 1

Я нашел решение, которое, по крайней мере, помогает в моей ситуации, вероятно, не подходит для других ситуаций:

Я даю всем своим зеленым дочерним divs полный запас:

margin: 10px;

И для окружающего желтого родительского div я установите отрицательный запас:

margin: -10px;

Мне также пришлось удалить любую явную настройку ширины или высоты для желтого родительского div, иначе это не сработало.

Таким образом, в абсолютном выражении дочерние divs правильно выровнены, хотя родительский желтый div, очевидно, выключен, что в моем случае в порядке, потому что оно не будет видимым.

Ответ 2

Извините за ответ на старое сообщение, но вы можете сделать следующее:

Предполагая, что ваш контейнер div имеет класс "желтый".

.yellow div {
    // Apply margin to every child in this container
    margin: 10px;
}

.yellow div:first-child, .yellow div:nth-child(3n+1) {
    // Remove the margin on the left side on the very first and then every fourth element (for example)
    margin-left: 0;
}

.yellow div:last-child {
    // Remove the right side margin on the last element
    margin-right: 0;
}

Число 3n + 1 равно каждому выпущенному четвертому элементу и, очевидно, будет работать только в том случае, если вы знаете, сколько будет отображаться в строке, но это должно проиллюстрировать пример. Подробнее о nth-child здесь.

Примечание.. Для того чтобы первый ребенок работал в IE8 и ранее, должен быть объявлен <!DOCTYPE>.

Примечание2: Селектор nth-child() поддерживается во всех основных браузерах, кроме IE8 и ранее.

Ответ 3

Добавьте margin в свой стиль div

margin:0 10px 10px 0;

http://www.w3schools.com/css/css_margin.asp

Ответ 4

Я опаздываю на вечеринку, но... У меня возникла аналогичная ситуация, и я обнаружил padding-right (и внизу, сверху, слева тоже, конечно). По тому, как я понимаю его определение, он помещает область заполнения внутри внутреннего div, поэтому нет необходимости добавлять отрицательный запас на родительский элемент, как это было с полем.

padding-right: 10px;

Это помогло мне!

Ответ 5

Разве это не просто случай применения соответствующего класса к каждому div?

Например:

.firstRowDiv { margin:0px 10px 10px 0px; }
.secondRowDiv { margin:0px 10px 0px 0px; }

Это зависит от того, знаете ли вы заранее, какой div применить к классу.

Ответ 6

Последний поздний ответ.

Если вы хотите использовать такую сетку, вы должны взглянуть на Bootstrap, ее относительно легко установить, и она дает вам именно то, что вы ищете, все обернутое в приятный и простой html/css +, он легко работает для того, чтобы сделать веб-сайты отзывчивыми.