图片库中的 DIV 位置

Question

我正在创建将插入到 wordpress 中的图库的响应式框架。该画廊由 images 个不同大小的画廊组成。问题是我不知道如何粘贴 "second row" 上的 div，就在 "first row" 的 div 下方。

这是我实际工作的代码笔：

Answer 1

啊，它终于加载了。我不认为你可以通过内联、内联块或浮动实现你想要的。我认为您需要根据他们在您转发的 link 上使用的内容使用绝对定位。我可以推荐使用同位素 https://github.com/metafizzy/isotope，它可以为您完成所有这些工作。这是一个很棒的工具。

根据您的浏览器支持矩阵，如果您不想使用 JS，您可以使用 CSS 列。

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

用 class 包装器在您的元素周围粘贴 div。

DIVs positions in gallery of images