当列数少于列数时，Chrome 列错误

Posted 2023-03-06

【中文标题】当列数少于列数时，Chrome 列错误

【英文标题】：Chrome columns bug when number of columns is less then column-count

【发布时间】：2017-07-06 21:38:08

【问题描述】：

我在使用 column-count 属性时遇到了 Chrome 问题。我有一个 div 里面我会有一些项目所以我设置column-count: 3; 当我有 3 个或更多项目时效果很好，但是当我只有两个项目时，它们不会显示在同一行而是在同一列中。这只发生在 Chrome 上。

代码示例：

.userinfo-content .grid-view.author-profile-tabs 
  .column-count(3);
  .column-gap(30);
  .article 
    position:relative;
    display: inline-block;
    margin-bottom: 40px;
    width: 100%;
    line-height: 1.3;
  

【问题讨论】：

您的标记看起来如何？

【参考方案1】：

根据您的标记外观，break-inside: avoid-column; 应该可以解决这个问题，同时使用display: block 而不是display: inline-block（您可以删除width: 100%）

.outer 
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;


.inner 
  position: relative;
  display: block;
  margin-bottom: 40px;
  line-height: 1.3;
  break-inside: avoid-column;


.inner:nth-child(even) 
  background: lightgray;

<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

---

根据评论更新

在这种情况下，为了解决底边距问题，您需要一个包装器，这样您就可以给outer 一个否定的margin-top，然后在项目上使用margin-top margin-bottom.

.outer 
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  margin-top: -30px;

.inner 
  position: relative;
  display: block;
  margin-top: 30px;
  line-height: 1.3;
  break-inside: avoid-column;


.inner:nth-child(even) 
  background: lightgray;

<div class="wrapper">
  <div class="outer">
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
  </div>
</div>

---

如果你想要的是 3 列布局，flexbox 会做得更好，并且有更好的浏览器支持

.outer 
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 20px;


.inner 
  width: calc(33.33% - 20px);
  margin: 0 20px 20px 0;
  line-height: 1.3;


.inner:nth-child(even) 
  background: lightgray;

<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

【讨论】：

感谢您的重播。我知道 flex，我也可以使用 jQuery masonry 插件来做到这一点以及其他一些问题：当只有 2 个项目时，不考虑 margin-bottom: 40px，但是当它们超过 3 个项目时，父 div 下方的边距非常大，大约 80 像素。

@Eduart 更新了如何解决下边距问题的示例

请注意，列有 И 流，而 Flexbox（行）有 Z 流。在开头加上1、2、3、4、5，看看CSS列和Flexbox方案的区别。

@FrankLämmer 是的，对于 flex row 方向，对于 flex column 方向，它与 CSS Columns 相同，从上到下。

感谢@LGSon。我在每列中的列表元素数量不相等，即第一个中有 5 个项目，第二个中有 4 个，第三个中有 5 个等等。一个项目上的 break-inside: avoid-column; 解决了我的问题。