Question

这是我的问题（在新标签页中打开以更清楚地看到它）

您可以在此页面中查看结果和我的代码。问题是a和c，d之间存在不必要的差距。如何弥补这一差距？

https://jsfiddle.net/vqonmqk5/2/（确保将结果字段与上面的字段一样大）

Thanks in advance!

编辑：我不想使用固定或绝对的位置来修复此问题

这是我想要实现的目标：

重要！：div是由php（在我的网页中）使用来自SQL数据库的数据创建的，所以我不想使用绝对定位之类的东西。而且我也不想使用外部库。

Answer 1

你可以这样做：https://jsfiddle.net/vqonmqk5/8/ 它不是很漂亮，但它可以满足您的需求。使用4个项目和一些floats

的包装器

Answer 2

您的问题没有一个解决方案。你可以定位你的div绝对或重建你的结构。

您的代码的目的是什么？它是否为响应式构建？

Answer 3

这是浮动的工作原理。由于div b的高度较高，c和d必须清除该高度然后向左滑动。由于a较短，因此存在差距。它按预期工作。

您可能希望查看像Masonry这样的库。看起来它可能会实现您的目标。