CSS：如何与div的第n行对齐？

Question

演示：http://jsfiddle.net/5qdZr/

我希望包含第二行照片的第一个div与包含第一行照片的第一个div“对齐到顶部”，包含第二行照片的第三个div必须“对齐到”顶部“第三个div包含第一行的照片。

当然，在css（#gallery div.placeholder）中设置了5px的保证金

HTML：

<div id="gallery">
<div class="placeholder">
<a href="#" title="" data-gallery="">
    <img src="http://lorempixel.com/400/400/" />
</a>
[... repeat so on]
</div>

css：

#gallery{background-color:red;}
#gallery img{-webkit-transition: opacity 0.4s;-moz-transition: opacity 0.4s;-ms-transition: opacity 0.4s;transition: opacity 0.4s;width:100%;}
#gallery div.placeholder{display:inline-block;vertical-align:top;width:30%;margin:5px;}

PRE：

我需要这个：

Answer 1

你可以浮动：左占位符。

但它不会给你你想要的确切结果。

我认为你需要使用一些javascript来绝对定位元素。

或调整边距（负边距 - 顶部）

Answer 2

html代码必须和你的一样吗？这里的问题是你的display:inline-block和div的顺序。

如果只有结果很重要而不是给定的代码结构，我会将其更改为：

jsfiddle

希望有所帮助

Answer 3

对于一般情况，没有简单，万无一失的纯CSS方式。

大多数实现类似布局的人都使用JavaScript / jQuery插件/库，例如：

http://masonry.desandro.com/

或者，您需要使用Bootstrap等网格框架或HTML表格（或display: table）创建3列布局。