Chrome 中不平衡的 CSS 列

Posted 2023-03-06

【中文标题】Chrome 中不平衡的 CSS 列

【英文标题】：Unbalanced CSS columns in Chrome

【发布时间】：2015-03-28 06:21:54

【问题描述】：

我想使用CSS columns 在多列中动态显示一些引导列表组，但我在 Chrome 中遇到了一些奇怪的间距问题。 Firefox 完美运行。看起来正是问题this guy had，但他从未得到答案，可能是因为他没有提供一个很好的例子。所以我会提供一个很好的例子。

CSS（在 Bootstrap 之后加载）：

.columns 
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  width: 600px;


.list-group 
  display: inline-block;
  width:  100%;      

html：

<div class="columns">
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Here it is on Bootply. 在 Firefox 中一切正常：前 3 个列表组位于第一列，接下来的 3 个位于第二列。但是在 Chrome 中，前 4 列在第一列中，而第二列非常短，只有 2 列。我怎样才能使其平衡？

（我还观察到the same question I linked to above 中描述的另一个问题，有时 Chrome 会在列下创建一个很大的边距，但稍后我将把它留给单独的问题。）

【问题讨论】：

都是column-fill: balance，chrome不支持，默认值为moz-column-fill -> developer.mozilla.org/en-US/docs/Web/CSS/column-fill。尝试为 POC 设置 moz-column-fill : auto。

.columns height : 400px; 似乎“解决”了 chrome 中的问题，但我相信您已经意识到这一点并想要一个真正的解决方案。

-moz-column-fill : auto 似乎将所有列表组放在一列中。那有意义吗？它仍然与将其拆分为 4 和 2 的 Chrome 不同。根据this，Chrome 应该默认平衡。看起来它可能是在努力平衡，但做得很糟糕？

你说得对，我想要一个“真正”的解决方案，否则我必须使用 JS 来动态估计应该是什么高度，因为我没有固定数量的列或列内固定数量的元素...

嘿@dumbmatter，第一个 - 不，这没有意义，这不是一个答案 - 这是列填充在 FF 上工作的概念证明（它响应，Chrome 或 IE 确实不是）。接下来，我认为您无法实现“真正的”解决方案，抱歉。如果您的列是动态的，则必须转到 javascript。顺便说一句，我认为这很奇怪，只有 FF（Mozilla 引擎）支持列填充。我看不出其他引擎不应该这样做的原因。它是（未确认的）标准的一部分。

【参考方案1】：

这可能是个愚蠢的问题，但你研究过 flexbox 吗？

.columns 
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  width: 600px;


.list-group 
  display: inline-block;
      width: 300px;

编辑查看未回答的问题，但不知道这有多大。

【讨论】：

旧问题仍然值得关注 :) 您的代码有效，但实际上我的问题中的原始代码现在似乎也适用于当前版本的 Chrome。我们生活在一个多么丰富的世界！

一开始我实际上是要这么说的，但后来想到，嘿，其他人可能出于某种原因在使用旧版本的 BS，为什么不呢！很高兴两个工作！