清除不同高度的浮动块行

Question

我正在使用略微修改的Soh Tanaka的Smart Columns,但在他的示例中,所有块/列具有相同的高度.如果我有不同高度的div,那么该技术就像下面的jsfiddle一样.我不喜欢DeSandro的Masonry如何处理高度问题,因为它根据窗口大小重新对块进行解扰,因此列表失去了隐含的顺序排序,所以我正在探索一个不同的解决方案.

我目前正在尝试的解决方案就是这个,但是我在尝试清除行/行的两侧时遇到了问题.我可以使用javascript在<span style="clear: both;"></span>每个行/行的末尾插入一个,但是当调整窗口大小并且单个页面中有多组这样的智能列时,这会导致更多问题.虽然我确信我可以编写一个脚本来处理这些案例,但我认为可能有一种更简单的方法.

最简单的方法是什么,当浮动块的列表需要换行时,它应该从前一行/行的最高框的底部开始？仅支持CSS的解决方案,但基于javascript/jQuery的解决方案是可以接受的.

换句话说,我希望浮动块,就像不同大小的字母"浮动"一样(默认情况下,字母在其基线处垂直对齐,但对于div块,顶部对齐可能看起来更好):

Answer 1

你可以切换float: left到display: inline-block; vertical-align: top.

http://jsfiddle.net/thirtydot/LCDDD/1/

我还添加了一点JavaScript:

$(this.config.column_selector).contents().filter(function() { return this.nodeType === 3; }).remove();

inline-block很遗憾地受HTML中的空格影响,因此代码段会删除li元素之间的文本节点.或者,有可用的CSS修复程序(有缺点),或者您可以删除HTML中的空格.