浮动div之间的差距

Question

如果浮动元素的高度不同，我总是想知道如何修复浮动元素之间的差距：

在这里，您可以看到我想要摆脱的Featured和Notice之间的差距。 （当屏幕分辨率较大时会变得更大，因为Featured框变得更加拉伸，因此文本在更少的线上传播）

也许重要的是要注意这是左浮动元素的顺序：

1. 主要
2. 新闻
3. 标题
4. 注意

小屏幕的布局（这看起来非常好我只想在下面的描述中向您展示我的意思，基于屏幕分辨率的布局不一致）

如果设计一致，我不介意实现某种网格系统，但在我的情况下，我使用的是基于屏幕分辨率的样式，因此在某个屏幕分辨率下，框的宽度从50％变为100％（这里没有使用固定值。）

我认为流动的网格可能是正确的方法但是在检查它们之后（从未使用它们）它们感觉相当静止，我不确定它们是否可以解决这个问题。

修改 问题的样本：http://jsfiddle.net/UfVrH/。请注意，A-D中的固定高度值仅用于模拟拉伸div的内容。

Answer 1

要解决这个问题，您需要计算每个元素的宽度和高度，并通过绝对定位来重新排列它们，幸运的是，有这样的插件可以执行此操作，Isotope