列数不会在Chrome中的短列上拆分

Question

编辑：我删除了几个人指出可能导致问题的<br>标记，并使用更正确的CSS重新创建了相同的布局，我在下面已经包含了{{1}在标签而不是中断），但我仍然得到相同的错误。

我正在使用width:100%将一些分组列表放入列中。

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

然而，在Chrome上，它并没有只分为两个选项。这是为什么？

IE版本，按预期工作

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

column-count: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%;}

Answer 1

在这种情况下，我只需更改HTML结构以在divs中包装标签/输入：

.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>

Answer 2

有几点虽然：

• 我一直在阅读另一个帖子，在Chrome上有两个列和column-count的奇怪行为。要解决此问题，请添加break-inside: avoid-column;

  参考：Chrome columns bug when number of columns is less then column-count

  另一个帖子建议另外添加-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 3

一种解决方法，您可以在display: flex;中添加.aoi，这样就可以了。

.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>