浮法堆叠CSS [英] Float stacking css

问题描述

我正在使用一个joomla插件，该插件会为表单生成一些html.我遇到的问题是css.

I am working with a joomla plugin that generates some html for a form. The problem I have is with the css.

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

The script generates several divs of varying height, all of which are stacked into a two column layout. The problem is that since they are all floated left, sometimes a second column tall div can block the next div from floating under the adjacent short first column div. Without further hand waving, here is a jsfiddle

我可以使用什么合理的浏览器兼容的CSS来正确地堆叠浮点数?请注意，第二列div本质上没有用于区分它们与第一列div的类或ID.

What reasonably browser compatible css can I use to stack the floats correctly? Note that the second column divs have essentially no classes or ids to distinguish them from the first column divs.

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

Here are things I would preferably avoid:

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

JavaScript还可以

Javascript is sort of okay

看来javascript注释不够突出.正如jsfiddle所言，一切正常.这就是我想要显示的布局.不幸的是，我不能在div上使用 correctfloat 类名，因为我不是生成它的人.删除正确的浮点类名以查看问题所在.

It seems the javascript comment is not prominent enough. As the jsfiddle stands, everything is working correctly. This is what I want the layout to look like. Unfortunately, I cannot use a correctfloat classname on the div, because I am not the one generating it. Remove the correctfloat classname to see what the problem is.

推荐答案

http://masonry.desandro.com/

这是您要找的吗?

这篇关于浮法堆叠CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！