当列数少于列数时，Chrome列会出现问题 [英] Chrome columns bug when number of columns is less then 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; 
宽度：100％; 
 line-height：1.3; 
} 
} 
  

解决方案

根据标记的样子， break-inside：avoid-column; 应该使用 display：block 来代替 display：inline-block （您可以放弃 width：100％）

  .outer {-webkit-column-count：3; -moz-column-count：3;列数：3; -webkit-column-gap：30px; -moz-column-gap：30px; column-gap：30px;}。inner {position：relative;显示：块; margin-bottom：40px;行高：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>  

$ b

---

根据评论更新

在这种情况下，为了击败底部空间问题，您需要一个包装器所以你可以给 outer 一个负数 margin-top ，然后使用 margin-顶部而不是 margin-bottom 。

  .outer {-webkit-column-count：3; -moz-column-count：3;列数：3; -webkit-column-gap：30px; -moz-column-gap：30px; column-gap：30px; margin-top：-30px;}。inner {position：relative;显示：块; margin-top：30px;行高：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>  

$ b

---

如果您想要的是3列布局， flexbox 可以做得更好，并且具有更好的浏览器支持功能
$ b $

.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：n-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>  

I'm having an issue with Chrome when I use the column-count property. I have a div where inside it I will have some items so I set column-count: 3; When I have 3 items or more it works well, but when I have only two they are not shown in the same row but in the same column. This happens only on Chrome.

code example:

.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;
  }
}

解决方案

Based on how your markup looks like, the break-inside: avoid-column; should fix that, together with usingdisplay: block instead of display: inline-block (and you can drop 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>

---

Updated based on a comment

In this case, to defeat that bottom margin issue, you need a wrapper so you can give the outer a negative margin-top, and then you use margin-top on the items instead of 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>

---

If it's a 3 columns layout you want, flexbox does that better and have better browser support

.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列会出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！