防止CSS3列重新进行内容更改

Question

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

在我的情况下，显示的每个WordPress结果都是<ul>元素，最初隐藏了<li>个孩子。当子元素被取消隐藏时，列有时会回流以保持相同的对称性。从美学的角度来看，它很棒，但从功能的角度来说，它会跳过我的内容，这不是我的意图。

有没有办法轻易阻止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中得到应用，尽管它仍然按我的意愿运行。