javascript - 浮动堆叠css

Question

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

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

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

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

Javascript有点好

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

score 2 · Accepted Answer

2

这是你要找的吗？

于 2012-10-14T08:23:36.120 回答

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

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

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

这是一个如何实现它的示例：http: //jsfiddle.net/U5FV9/5/

score 1 · Accepted Answer

根据 Mladen 的要求，我发布了最适合我的方法。我使用了一个名为selectivizr的不显眼的 javascript 库，它启用了对最新 css 的跨浏览器支持，get this, all browsers。

然后我开始使用：

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

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

谢谢你们的帮助。

score 0 · Accepted Answer

0

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

overflow:hidden;

于 2012-10-14T07:59:00.887 回答

5 回答 5