У меня есть родительский div, который может изменить его размер, в зависимости от доступного пространства. Внутри этого div у меня есть плавающие div. Теперь я хотел бы иметь промежуток между этими div, но не имеет места для родительского div (см. Рисунок).
Есть ли способ сделать это с помощью CSS?
Спасибо
Я нашел решение, которое, по крайней мере, помогает в моей ситуации, вероятно, не подходит для других ситуаций:
Я даю всем своим зеленым дочерним divs полный запас:
margin: 10px;
И для окружающего желтого родительского div я установите отрицательный запас:
margin: -10px;
Мне также пришлось удалить любую явную настройку ширины или высоты для желтого родительского div, иначе это не сработало.
Таким образом, в абсолютном выражении дочерние divs правильно выровнены, хотя родительский желтый div, очевидно, выключен, что в моем случае в порядке, потому что оно не будет видимым.
Извините за ответ на старое сообщение, но вы можете сделать следующее:
Предполагая, что ваш контейнер 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 и ранее.
Добавьте margin в свой стиль div
margin:0 10px 10px 0;
Я опаздываю на вечеринку, но... У меня возникла аналогичная ситуация, и я обнаружил padding-right (и внизу, сверху, слева тоже, конечно). По тому, как я понимаю его определение, он помещает область заполнения внутри внутреннего div, поэтому нет необходимости добавлять отрицательный запас на родительский элемент, как это было с полем.
padding-right: 10px;
Это помогло мне!
Разве это не просто случай применения соответствующего класса к каждому div?
Например:
.firstRowDiv { margin:0px 10px 10px 0px; }
.secondRowDiv { margin:0px 10px 0px 0px; }
Это зависит от того, знаете ли вы заранее, какой div применить к классу.
Последний поздний ответ.
Если вы хотите использовать такую сетку, вы должны взглянуть на Bootstrap, ее относительно легко установить, и она дает вам именно то, что вы ищете, все обернутое в приятный и простой html/css +, он легко работает для того, чтобы сделать веб-сайты отзывчивыми.