2016-05-01 10 views
-1

У меня есть плавающий div с переменной высотой, но такой же ширины.
Несколько раз есть вертикальный зазор между буксиром divs, как я могу предотвратить это? enter image description hereСнять зазор между плавающим элементом

https://jsfiddle.net/ss6pq2L0/2/

+0

Код всегда идет в вашем вопросе первым. Также BS graid основан на 12 столбцах. Ваши итоги 42. – j08691

+0

Есть ли причина, по которой вы не можете просто поставить ее в 2 столбца? Помимо этого, я не думаю, что есть решение этого. – joshhunt

+2

@ jo8691 не обязательно, он просто определяет ширину каждого div и, как и ожидалось, если div не подходит, он выпадет. Например: http://getbootstrap.com/css/#grid-example-wrapping – joshhunt

ответ

1

Такое поведение является "сетка" и следовало ожидать. Строка будет иметь фиксированную высоту по всем столбцам. Когда ячейка в первом столбце выше, два (или более) будут плавать друг над другом во втором столбце.

Если вы согласны с тем, что 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; 
} 
+1

Обратите внимание, что это разделит некоторые div на два, так что это может быть не идеальное решение, см. Https://jsfiddle.net/75gjs30r/ (не сказать, что этот ответ неверен, просто зависит от его ситуации) – joshhunt

+0

спасибо, но я хотите, чтобы divs упорядочивались горизонтально, а не вертикально. –

+0

и @joshhunt прав, я не хочу, чтобы divs были разбиты. –