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

Question

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

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

当然与顶部对齐，在 css 中设置了 5px 边距（#gallery div.placeholder）

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

上一篇：

我需要这个：

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 列布局。