1

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

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

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

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

IE版本，按预期工作

IE 按预期工作

Chrome 没有将第一个短组分成 2 列

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>

4

3 回答 3

2

在这种情况下，我只需更改 HTML 结构以将标签/输入包装在 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>

于 2018-03-19T14:58:05.523 回答
0

对此有几点看法：

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

    参考：当列数少于列数时，Chrome 列错误

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

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

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

让我知道这是否有效:)

于 2018-03-19T14:43:45.020 回答
0

一种解决方法，您可以添加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>

于 2018-03-19T14:49:23.013 回答