浮动堆叠css

Question

我正在使用joomla插件为表单生成一些html。我遇到的问题是使用css。

该脚本生成几个不同高度的div，所有div都堆叠成两列布局。问题是因为它们都是向左浮动的，所以有时第二列高div可以阻止下一个div在相邻的短第一列div下浮动。没有进一步挥手，这是一个jsfiddle

我可以使用什么合理的浏览器兼容的CSS来正确堆叠浮动？请注意，第二列div基本上没有类或id，以区别于第一列div。

以下是我最好避免的事情：

1. 非兼容的解决方案，例如nth-child（）
2. 更改脚本以使用html
生成css挂钩

Javascript有点好吗

编辑：似乎javascript评论不够突出。正如jsfiddle站立，一切正常。这就是我想要布局的样子。不幸的是，我不能在div上使用correctfloat类名，因为我不是生成它的人。删除correctfloat类名以查看问题所在。

Answer 1

http://masonry.desandro.com/

这是你要找的吗？

Answer 2

您在css文件中使用此样式代码

#yourdiv{
 float:left;
 height:yoursizepx;
 width:yoursizepx;
 overflow:hidden;
}

Answer 3

在clear: left上使用short解决了您给出的示例中的问题：

.short{
    height:100px;
    clear:left;
}

请参阅：http://jsfiddle.net/U5FV9/2/和 http://jsfiddle.net/U5FV9/3/

但是，根据您提供的有关动态创建表单的信息，我不禁觉得它可能无法始终解决问题。例如，如果short元素需要在右边，该怎么办？

我认为更好的解决方案是让两个列容器浮动并包含short和tall元素。这样你就可以始终确保它们正确显示。

以下是您可以如何实现的示例： http://jsfiddle.net/U5FV9/5/

Answer 4

根据Mladen的要求，我发布了最适合我的方法。我使用了一个名为selectivizr的不显眼的javascript库，它支持对最新的css进行跨浏览器支持，获取此功能，所有浏览器。

然后我继续使用：

someclassname:nth-child(2n){
    float:right;
}

将每个第二列div对齐，而不需要第二列容器。它仍然不是一个完美的解决方案，因为理论上div仍然可能堆积在一边，但到目前为止我还没有看到它发生过。

感谢您的帮助。

Answer 5

如果我理解正确，您是否尝试在块上修改或添加溢出属性？

overflow:hidden;