当列数少于列数时,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>