Question

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

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

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

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

enter image description here

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修复程序（有缺点），或者只能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

正如thirtydot所提到的，内联块肯定是要走的路。你当然可以用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中使用它。我把它称为“内联块网格”，我也写了blog post。

清除不同高度的浮动块行

3 个答案: