从Chrome中的CSS列顶部删除多余的空间

Question

示例：https://jsfiddle.net/5tehhb0n/1/

HTML：

"rotate("+i+"deg)"

CSS：

<div class="wrapper">
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
</div>

在Chrome中，这会导致第二列中的第一项在其上方留出空格，这是由第一列中最后一项的边距引起的：

在每个.wrapper { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; background-color: blue; display: block; overflow: hidden; } .item { -webkit-column-break-inside: avoid; display: block; background-color: red; margin-bottom: 50px; } 上设置display: inline-block可以解决问题，但我需要保持边距折叠，这不适用于.item。

是否有某种方法可以避免额外的空间，并且每个inline-block仍保留display: block？

Answer 1

  

注意：您的示例在IE 11和新的Edge浏览器中完美运行，没有间隙。我不确定哪种浏览器具有正确的行为，但差距仅存在于Chrome和Firefox中。我在下面介绍的解决方法在IE 11中已经破解，但在Edge中工作正常。

一个有点奇怪的解决方法

底部边距正在泄漏到第二列。幸运的是，底部边框不具有相同的行为，因此我们可以：

• 删除边距并使用透明边框重新创建：

  .item {
     border-bottom: solid 50px transparent;
  }
  

• 使用pseudo-element创建背景，因为它不会在边框下方拉伸（透明边框会显示项目背景）。伪元素可以使用z-index: -1

  分层在项目内容下面

  .item:before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: red;
     z-index: -1;
  }
  

• 将.wrapper的背景放在带有z-index: -1的items伪元素后面。它还必须position: relative才能使z-index起作用：

  .wrapper {
      position: relative;
      z-index: -1;
  }
  

完整示例

＆＃13;

＆＃13;

.wrapper {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  background-color: blue;
  overflow: hidden;
  position: relative;
  z-index: -1;
}
.item {
  -webkit-column-break-inside: avoid;
  border-bottom: solid 50px transparent;
  position: relative;
}
.item:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: red;
  z-index: -1;
}

＆＃13;

<div class="wrapper">
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>
  <div class="item"><img src="http://placehold.it/100x100"></div>  
</div>

＆＃13;

＆＃13;

＆＃13;