清除不同高度的浮动块行

Question

我使用的是稍作修改的 Soh Tanaka 的 Smart Columns，但在他的示例中，所有块/列的高度都相同。如果我有不同高度的 div，则该技术会像以下jsfiddle 一样中断。我不喜欢 DeSandro 的 Masonry 处理高度问题的方式，因为它会根据窗口大小重新打乱块，因此列表失去了隐含的顺序，因此我正在探索不同的解决方案。

我目前正在尝试的解决方案是this，但我在尝试清除行/行的两侧时遇到问题。我可以使用 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 中空格的影响，因此 sn-p 删除了 li 元素之间的文本节点。或者，有可用的 CSS 修复（有缺点），或者您可以只使用remove the whitespace in your HTML。

Answer 2

不知道这是否是您要查找的内容，但我想我不久前遇到了类似的问题。为了我的帮助，我写了这个小插件（虽然名字有点不适合它的功能）：

(function($) {
  $.fn.extend({
    fixLineBreak: function(css) {
      var minLeft = $(this).position().left;
      return $(this).each(function() {
        var position = $(this).position();
        if (position.left > minLeft && $(this).prev().position().left >= position.left) {
          $(this).css(css);
        }
      });
    }
  });
}(jQuery));

你会这样使用它：

$('#my_boxwrapper li').fixLineBreak({
  clear: 'left'
});

演示：http://jsfiddle.net/v79Cu/

Answer 3

正如三十点所提到的，内联块绝对是要走的路。您当然可以仅使用 css 来实现这一点。

在你的包装器上（我想你把它命名为“列”），给它下面的 css：

.col-group {
  font-family: monospace; /* for spacing columns correctly */
  letter-spacing: -.65em; /* this too */
  margin-left: -1em; 
  margin-right: -1em;
  text-align: left; /* center or justify for columns in last row */
  display: block;
}

然后在您的列（我认为您将这些命名为“框”）上，应用此 css：

.box {
  font-family: Serif; /* be sure to reset the font and letter-spacing */
  letter-spacing: normal;
  display: inline-block;
  padding-left: 1em;
  padding-right: 1em;
  position: relative;
  float: none;
  text-align: left;
  vertical-align: top; /* align row's columns along top or baseline */
  box-sizing: border-box;
}

我没有使用智能列，但它似乎可以很好地与这个 css 协同工作，因为它只是改变宽度，对吧？

无论如何，您可以查看working example 或在this fiddle 中使用它。我将其称为“Inline-Block Grid”，并为此写了一个 blog post。