css - 防止 CSS3 列在内容更改时回流

Question

我创建了一个模板页面，使用 CSS3 column 在两个整齐的列中显示 WordPress 查询结果。属性。结果流畅，除了当我使用(类似)JavaScript 动态更改列的内容时。

在我的例子中，显示的每个 WordPress 结果都是一个 <ul>元素及其 <li> child 最初隐藏。当子元素未隐藏时，列有时会回流以保持相同的对称性。从美学的 Angular 来看，它很棒，但从功能的 Angular 来看，它会跳转我的内容，这不是我的意图。

有什么方法可以轻松防止column从最初建立后回流？我宁愿继续使用这种技术，也不愿使用另一种方法来建立列。

我目前只使用简单的标记和 CSS:

<div class="results-list">
  <!-- PHP/WP Query Stuff in here -->
  <ul class="fa fa-plus"> <!-- The query expand button -->
    <li class="hide-me"> A hidden query result</li>
    <li class="hide-me"> Another hidden result</li>
  </ul>
</div>

.results-list {
  column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
}

.hide-me {
  display: none;
}

前图:

展开一个元素后，请注意右栏的顶行如何回流到左栏的底部:

我宁愿它只是向下推右栏。也许不可能使用 column ，但我想我会问!

Answer 1

以下似乎对我有用；基本上在列正常布局后，添加一些额外的样式来修复每列的顶部:

jQuery(document).ready(function(){
    var last = 0;
    jQuery('.results-list ul').each(function(){
        if (jQuery(this).offset()['top'] <= last) {
            // start of new column
            jQuery(this).css({
                'column-break-before': 'always',
                'break-before': 'column'
            });
        }
        last = jQuery(this).offset()['top'];
    });
});

如果上述工作正常，只有 Office Supplies & Printing 容器应该获得额外的 CSS，这将防止它在任何后续内容更改时回流到第一列。

---

注意:如果仅通过 CSS 手动设置分栏符，我会使用以下内容:

-webkit-column-break-before: always;
break-before: column;

但是 jQuery 1.8 says it will apply the vendor prefixes ，但是 column-break-before 似乎并没有在 Chrome 中应用，尽管它对我来说仍然可以正常工作。