Jquery 使用高度可变的左浮动div标记生成漂亮、可伸缩的行

我想以漂亮、整洁、像表格一样的行显示一系列元素。每个元素都有一个设置的宽度，但有一个可变的高度（由该元素内的内容自动确定）。每个都被分配了浮动：左；宽度：x；其中x是所有此类元素的相同值。我现在得到的结果是，如果在前一行元素中有一个高度高于下一行元素的元素，div不会一直到下一行的开头。下面是正在发生的事情（注意div7并没有一直向左浮动）

我想要的是这样的东西：

请注意所有元素是如何换行的

我可以通过一个表格来实现这一点，但是我希望元素可以根据浏览器的大小进行缩放（例如，如果浏览器更宽，则为4个元素的行，如果浏览器更窄，则为2个元素的行）。桌子可以防止这种情况。选择性设置清晰：左；也不允许上述比例

我对Javascript解决方案（首选jQuery）或任何其他可能给我带来好行的“黑客”持开放态度

---

谢谢

我相信，如果你只是用一个div来封装每一行，那么所有的东西都会有点到位。行Div将增长到最大项目的高度，以确保下一行不会在前一行结束之前开始。

注意：我刚刚注意到Div 4的操作方式存在错误（它将在Div 2下）。请忽略这一点，即使我正确地绘制了该部分的图表，它也会显示相同的问题。您可能想要查看。它做了一些很酷的事情（不确定它是否是你想要的）。谢谢你的解决方案。这样做的问题（据我所知）如果重新调整浏览器窗口的大小，我将在每行中保留一定数量的元素，而不是让所有内容都回流以适应页面宽度。如果您希望每行具有可变数量的元素，那么您在OP中关于能够使用表完成此操作的描述是不正确的。为了清楚起见，你应该把它去掉。他说‘桌子会防止这种情况发生。’