将各种形状的div一起浮动成行

Question

我有一个包含大约十个DIV的大容量元素 - 大多数平均宽度约为300像素，并且都设置为向左浮动。最终结果是小部件/网格类型布局。但是，这种风格专门针对响应式设计而构建 - 我们使用媒体查询来根据设备调整大小和列数。

问题是我们可能有一个或两个双宽或双高的盒子。双倍宽度并不会导致浮动问题（我无论如何都无法解决），但问题是双高。双高将扩展到下一行，但防止其他框浮动在其左侧。 Float-right不是一个选项，因为高箱不能总是在右边。

我正试图找到一种方法来动态地找出每个块可以浮动的位置，比如解决一个谜题。我看过像砌体，jLayout等一些javascripts，但它们要么不起作用，要么不解决不规则盒子的问题。

所以：

1. 我想避免绝对定位任何东西，因为我们每次都必须重新做一遍，因为每一个元素都会让他们感到不舒服。
2. 我需要允许双倍宽度和双倍高度，但它们可能并不总是存在，最终，用户应该能够确定它们的位置，因此我们不能总是只根据已知位置编写javascript。 / LI>
3. 我试过通过jQuery移动元素，这确实有效，但必须在窗口调整大小上完成，这是一个太多的活动，当你转换需要三列的宽度时，会导致元素来回闪烁4。
4. 使用css3列不起作用，因为DIV被视为文本，当它们传递到下一列时被分成两部分，并且不允许双倍宽。

有没有人有任何想法或建议？

Answer 1

使用Jquery Masonry或Isotope，它会将所有容器安排到最节省空间的布置中（或者如果你使用同位素，你可以调整它以优先考虑其他形式的安排）

Answer 2

好吧，如果您不太关心元素的顺序，那么一个简单的解决方案就是：

1. 将您的商品添加到#main，以便首先添加所有.tall小部件。将.tall小部件浮动到右侧。
2. 同样，请确保最后添加所有.wide小部件并将其浮动到左侧。

它适用于这种情况，我认为可以为任何这些元素集合提供最佳的空间利用。

Answer 3

我仍然没有找到任何真正的方法来处理这种情况。现在我刚刚编写了一些自定义的javascript来在页面调整大小时交换几个DIV。