列数未在 Chrome 中的短列上拆分

Question

编辑：我删除了几个人指出可能导致问题的 <br> 标签，并重新创建了具有更正确 CSS 的相同布局，我'已经包括在下面（在标签上使用 width:100% 而不是中断），但我仍然遇到相同的错误。

我正在使用 column-count:2 将一些分组列表放入列中。

我不是经常写这个，但在 IE 上它按预期工作，所有分组列表分为 2 列。

然而，在 Chrome 上，它并没有拆分为只有两个选项的非常短的一组。这是为什么？

IE版本，正常运行

Chrome 不将第一个短组拆分为 2 列

.aoi {
  column-count: 2;
  padding: 1em 1em 1em 2em;
}

.bfsubs_option_label {
background: url(checkbox_bg.png);
background-repeat: no-repeat;
padding: 0 0 0 1.75em;
height: 18px;
cursor: pointer;
display: inline-block;
margin-bottom: .5em;
background-position: 0 2px;
width: 100%;}

<div class="aoi types-of-communication" style="">
  <input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">
  <label class="bfsubs_option_label" for="option_19807">Event Invitations</label>
  <input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
  <label class="bfsubs_option_label" for="option_20000">Insights</label><br>
</div>

Answer 1

一些想法：

我在另一个线程中读到 Chrome 有两列和 column-count 有一些奇怪的行为。要解决此问题，请添加 break-inside: avoid-column;

参考：

另一个线程建议另外添加 -webkit-backface-visibility: hidden;

尝试为 Chrome 添加 -webkit-column-count 属性。（但是，我会认为它没有）：

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

如果有效请告诉我:)

Answer 2

一种解决方法，您可以在 .aoi 中添加 display: flex;，它会起作用。

.aoi {
  column-count: 2;
  padding: 1em 1em 1em 2em;
  display: flex;
}

<div class="aoi types-of-communication" style="">
  <input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">
  <label class="bfsubs_option_label" for="option_19807">Event Invitations</label><br>
  <input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
  <label class="bfsubs_option_label" for="option_20000">Insights</label><br>
</div>

Answer 3

在这种情况下，我将简单地更改 HTML 结构以将 label/input 包装在 div 中：

.aoi {
  column-count: 2;
  padding: 1em 1em 1em 2em;
}

<div class="aoi types-of-communication">
  <div>
    <input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">
    <label class="bfsubs_option_label" for="option_19807">Event Invitations</label>
  </div>
  <div>
    <input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
    <label class="bfsubs_option_label" for="option_20000">Insights</label>
  </div>
</div>

输入更多：

.aoi {
  column-count: 2;
  padding: 1em 1em 1em 2em;
}

<div class="aoi types-of-communication">
  <div>
    <input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">
    <label class="bfsubs_option_label" for="option_19807">Event Invitations</label>
  </div>
  <div>
    <input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
    <label class="bfsubs_option_label" for="option_20000">Insights</label>
  </div>
  <div>
    <input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">
    <label class="bfsubs_option_label" for="option_19807">Event Invitations</label>
  </div>
  <div>
    <input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
    <label class="bfsubs_option_label" for="option_20000">Insights</label>
  </div>
  <div>
    <input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
    <label class="bfsubs_option_label" for="option_20000">Insights</label>
  </div>
</div>

列数未在 Chrome 中的短列上拆分

column-count not splitting on short columns in Chrome

html

css

css-multicolumn-layout

column-count