Chrome 列数小于列数时的列错误

Question

我在使用 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;
  }
}

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

Chrome 列数小于列数时的列错误

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

css

google-chrome

column-count

css-multicolumn-layout