web-dev-qa-db-fra.com

Faire une grille de type Pinterest avec Bootstrap: les cases ne sont pas affichées les unes en dessous des autres

Le schéma HTML est le suivant:

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

.item style CSS:

float: left;

Et le résultat: enter image description here

Mais les cases blanches ne sont pas alignées les unes après les autres - où pourrait être le problème? J'ai aussi essayé d'utiliser display: inline-block; au lieu de float: left;, mais le résultat était fondamentalement identique.

Je vous remercie

htmlcsstwitter-bootstrapgridpinterest
10
user984621

Vous pouvez utiliser CSS 3 column-width et column-gap comme ceci.

http://www.bootply.com/118335

17
Zim

Je rencontre exactement le même problème et j'ai trouvé celui qui fonctionnait pour moi.

https://github.com/kudago/waterfall

Cela ne dépend que de js no css, bien que j'utilise toujours bootstrap pour d'autres styles. J'utilise également jquery.infinitescroll.js pour charger dynamiquement des éléments et, une fois les éléments ajoutés, waterfall fera son travail et mettra tout en place.

Le seul problème que j'ai trouvé est que parfois, les éléments peuvent se chevaucher un peu verticalement, dès que vous continuez à faire défiler l'écran, ils sont placés correctement. Je ne sais pas pourquoi cela se produit, un peu agaçant, mais jusqu'à ce que je trouve quelque chose de mieux.

J'espère que cela t'aides.

0
Ray Fan