Javascript 强制内容从左到右，但高度不溢出

目前，通过使用左浮动元素，我能够在具有水平滚动的容器中从左向右强制内容。（见图1）

我需要盒子按照图2的顺序流动。到目前为止，如果内容“命中”div的底部，我找不到任何方法来阻止其向右移动-或者它在外部流动，或者如果使用overflow:hidden，则表面上停止

正在动态加载内容

这可以用CSS来完成，还是我需要javascript

非常感谢您的帮助

image1

图像2

---

您必须使用

为内部内容创建列。然后可以使用jQuery的

append（）

方法将内容动态加载到所选的div中

我建议使用布局“网格”库，以减少跨浏览器错误，并使您的列布局更简单。Twitter引导框架将非常适合这一点：

---

这里有一个到网格部分的链接：

非常感谢-我已经将引导加载到项目中，所以我将尝试一下-如果成功，请接受这个答案（或者跟进更多问题）。对于这个示例，我认为附加将不起作用-内容将是框1的宽度（在图中）或该宽度的一半，因此div需要足够动态，以处理一个全宽或两个半宽/半高框，然后转到下一列。我尝试过css3列，但是如果列span属性无效，它们就不是动态的。如果动态加载内容，那么在加载数据时，是否应该事先确定内容宽度并相应调整宽度？这是使用框架（Ruby on Rails）修复的-我设置了一个div，以不同于大的块来包装小的块，每个div限制2个小的块，这样小的块向下流动，然后新的块出现在它们的右边