У меня есть плавающий div
с переменной высотой, но такой же ширины.
Несколько раз есть вертикальный зазор между буксиром divs
, как я могу предотвратить это? Снять зазор между плавающим элементом
https://jsfiddle.net/ss6pq2L0/2/
У меня есть плавающий div
с переменной высотой, но такой же ширины.
Несколько раз есть вертикальный зазор между буксиром divs
, как я могу предотвратить это? Снять зазор между плавающим элементом
https://jsfiddle.net/ss6pq2L0/2/
Такое поведение является "сетка" и следовало ожидать. Строка будет иметь фиксированную высоту по всем столбцам. Когда ячейка в первом столбце выше, два (или более) будут плавать друг над другом во втором столбце.
Если вы согласны с тем, что div упорядочен вертикально в столбцах, вы можете избавиться от этих пробелов, подобных этому. (Помилование встроенного стиля.)
<div class="row" style="column-count:2">
<div class="col-xs-12">
<div style="height: 80px"></div>
</div>
...
</div>
Добавление этого CSS поможет сохранить столбцы от взлома в середине элемента (в современных браузерах).
.col-xs-12 {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
Обратите внимание, что это разделит некоторые div на два, так что это может быть не идеальное решение, см. Https://jsfiddle.net/75gjs30r/ (не сказать, что этот ответ неверен, просто зависит от его ситуации) – joshhunt
спасибо, но я хотите, чтобы divs упорядочивались горизонтально, а не вертикально. –
и @joshhunt прав, я не хочу, чтобы divs были разбиты. –
Код всегда идет в вашем вопросе первым. Также BS graid основан на 12 столбцах. Ваши итоги 42. – j08691
Есть ли причина, по которой вы не можете просто поставить ее в 2 столбца? Помимо этого, я не думаю, что есть решение этого. – joshhunt
@ jo8691 не обязательно, он просто определяет ширину каждого div и, как и ожидалось, если div не подходит, он выпадет. Например: http://getbootstrap.com/css/#grid-example-wrapping – joshhunt