我想要实现像
Pinterest或
Pose这样的站点旁边的图像/ 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
因为3rd Div(.differentHeightDiv)的高度较大,所以我知道如果所有的高度相等,事情会发挥作用,但是如果不平等的话我想要一个解决方案(我的意思是,如果每个div都有不同的分辨率/宽高比)有一个请帮我这个.
谢谢.
解决方法
这是一个很好的教程,基本的背后实现了pinterest layout
http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/
