在Chrome

Question

從CSS列的頂端刪除額外的空間

實施例：https://jsfiddle.net/5tehhb0n/1/

HTML：

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

CSS：

.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。

有沒有辦法避免額外的空間，並仍然保持每.itemdisplay: 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。它也必須有position: relative的z-index的工作：

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

完整的例子

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

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