DIV在图像库中的位置

Question

我正在创建一个将插入wordpress的图库的响应式骨架。画廊由不同大小的images组成。问题是我无法弄清楚如何粘贴{“1}}，它们位于”第二行“的正上方，位于”第一行“的div之下。

这是我实际工作的代码：

http://codepen.io/anon/pen/JdXPde

我希望我的画廊看起来像：http://webplantmedia.com/starter-themes/wordpresscanvas/features/gallery/gallery-columns/#gallery-6

Answer 1

啊，它最终加载了。我不认为你可以使用内联，内联块和浮点数来实现你的目标。我认为您需要根据您转发的链接使用绝对定位。我可以推荐使用同位素https://github.com/metafizzy/isotope来完成这一切。这是一个很棒的工具。

如果您不想使用JS，可以使用CSS列，具体取决于您的浏览器支持矩阵。

.wrapper { 
    column-width: 500px;
    /* plus browser prefixes */
    -moz-column-width: 500px; 
    -webkit-column-width: 500px; 
}

使用一类包装器在元素周围粘贴一个div。