Создание сетки, похожей на Pinterest, с помощью Bootstrap: поля не отображаются прямо друг под другом

Схема HTML следующая:

<div class="items">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

.item Стиль CSS:

float: left;

И результат: введите здесь описание изображения

Но белые прямоугольники не выровнены один за другим — в чем может быть проблема? Я также пытался использовать display: inline-block; вместо float: left;, но результат был в основном таким же.

Спасибо


html css twitter-bootstrap grid pinterest
person user984621    schedule 03.03.2014    source источник

Ответы (2)


arrow_upward
17
arrow_downward

Вы можете использовать CSS 3 column-width и column-gap вот так..

http://www.bootply.com/118335

person Zim    schedule 03.03.2014
comment
Спасибо Скелли. Это в основном то, что я использую в настоящее время, но меня беспокоит тот факт, что самые новые элементы отображаются в первом столбце, а не в первой строке, что делает их не очень заметными для посетителей. - person user984621; 03.03.2014
comment
Невозможно без css3 или JavaScript. Это означало бы, что вам нужно будет позиционировать свои элементы абсолютно на странице каждый раз. Плохо масштабируется :) - person Oz Lodriguez; 05.03.2014

arrow_upward
0
arrow_downward

Я столкнулся с точно такой же проблемой, и я нашел это, которое сработало для меня.

https://github.com/kudago/waterfall

Это зависит только от js без css, хотя я все еще использую бутстрап для других стилей. Я также использую jquery.infinitescroll.js для динамической загрузки элементов, и после добавления элементов водопад сделает свое дело и расставит все по местам.

Единственный сбой, который я обнаружил, это то, что иногда элементы могут немного перекрываться по вертикали, как только вы продолжаете прокручивать вниз, они размещаются правильно. Я не уверен, почему это происходит, немного раздражает, но пока я не найду что-то лучше.

Надеюсь это поможет.

person Ray    schedule 09.06.2015