web-dev-qa-db-ja.com

Bootstrapを使用してPinterestのようなグリッドを作成する：ボックスは互いに真下に表示されません

HTMLスキームは次のとおりです。

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

.item CSSスタイル：

float: left;

そして結果： enter image description here

しかし、白いボックスが次々と整列していません-どこに問題があるのでしょうか？ display: inline-block;の代わりにfloat: left;も使用してみましたが、結果は基本的に同じでした。

ありがとうございました

htmlcsstwitter-bootstrapgridpinterest
10
user984621

CSS3を使用できますcolumn-widthおよびcolumn-gap このような..

http://www.bootply.com/118335

17
Zim

私はまったく同じ問題に遭遇し、これが私のために働いているのを見つけました。

https://github.com/kudago/waterfall

それはjsno cssにのみ依存しますが、他のスタイリングにはまだbootstrapを使用しています。jquery.infinitescroll.jsを使用してアイテムを動的にロードし、アイテムが追加された後、ウォーターフォールがその魔法とすべてを配置します。

私が見つけた唯一の不具合は、下にスクロールし続けるとすぐにアイテムが正しく配置されると、アイテムが少し垂直に重なることがあることです。なぜこれが起こっているのかわかりませんが、少し面倒ですが、もっと良いものが見つかるまでは。

お役に立てれば。

0
Ray