安排Div元素堆叠在其他旁边 - Pinterest或Pose风格

Question

我想在Pinterest或Pose这样的网站中实现与其他地方相邻的images/div使用或遵循的风格,无论它们的个人分辨率如何.我试过像这样安排div彼此相邻

<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; }

这是安排的像

1 2 3 4
      5
6 7 8

由于3'rd事业部(.differentHeightDiv)高度时,我知道,如果所有的高度等于事情会工作,但我希望有一个解决方案,如果其不相等的(我的意思是如果每个div有不同的分辨率/长宽比)有人请帮助我这个.

谢谢.

Answer 1

这是一个很好的教程,介绍了实现最佳布局的基本原理http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/