css - 浮动div之间的差距

Question

我一直想知道如果浮动元素的高度不同，如何修复它们之间的间隙：

Featured在这里，您可以看到Notice我想摆脱的差距。（当屏幕分辨率更大时获取更大，因为Featured框变得更加拉伸，因此文本分布在更少的行上）

可能需要注意的是，这是浮动左元素的顺序：

1. 精选
2. 消息
3. 头条新闻
4. 注意

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

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

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

编辑： 问题示例：http: //jsfiddle.net/UfVrH/。请注意，AD 中的固定高度值仅用于模拟拉伸 div 的内容。

Answer 1

要解决这样的问题，您需要计算每个元素的宽度和高度，并通过绝对定位它们重新排列它们，幸运的是，有这样一个插件可以做到这一点， 同位素