Disposer les éléments Div empilés les uns sur les autres - Pinterest ou Pose style
Je tiens à mettre en œuvre le style utilisé ou suivie pour les images/div disposés l'un à côté des autres dans des sites comme Pinterest ou Poser quel que soit leur résolution. J'ai essayé d'arranger div uns à côté des autres comme cette
<div id="mainContainer">
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="differentHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
</div>
Css:
#mainContainer { width:800px; }
.sameHeightDiv{ float: left; width: 100px; height:190px; }
.differentHeightDiv { float: left; width: 100px; height:225px; }
Qui est organisé comme
1 2 3 4
5
6 7 8
Car 3'rd Div (.differentHeightDiv) la hauteur est plus grande, je sais que les choses vont fonctionner si tous les sommets sont égaux, mais je veux une solution si son inégale (je veux dire, si chaque div a différentes résolutions/aspect ratio) Quelques une, merci de m'aider sur ce point.
Grâce.
source d'informationauteur Wesley
Vous devez vous connecter pour publier un commentaire.
Voici un tutorial sur la base de derrière la réalisation de la mise en page pinterest http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/
Airbnb vient de open source infinity.js
Voir une démo ici