CSS列布局下的額外空間

我有一個2列僅用於CSS的網格，但它會在兩列之下產生多餘的空間。CSS列布局下的額外空間

screenshot 。

如果我從每個單元格中刪除內聯塊，多餘的空間並不那麼糟糕，但這是防止網格環繞所需的。我推測這個問題是與垂直對齊，增加這似乎沒有什麼區別。有什麼辦法來防止這種多餘的空間？

.columns { 
    -webkit-column-gap: 1.5em; 
    -moz-column-gap: 1.5em; 
    column-gap: 1.5em; 
    -webkit-column-fill: auto; 
    -moz-column-fill: auto; 
    column-fill: auto; 

} 

.columns__cell { 
    break-inside: avoid-column; 
    column-break-inside: avoid; 
    display: inline-block; 
    vertical-align: top; 
    width: 100%; 
} 

.columns--2 { 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-count: 2; 
}

結構：

<div class="column column--2"> 
    <!-- repeated --> 
    <div class="widget__item poll column__cell"> 
     <div class="widget__head clearfix"> 
      *** 
     </div> 
     <div class="widget__body"> 
      *** 
     </div> 
    </div> 
    <!-- repeated --> 
</div>

來源

2014-09-24 jshjohnson

向我們展示一些標記，在jsfiddle中更好 – 2014-09-24 12:36:24

難道你看不到@LorenzoMarcon列下的額外空間嗎？看看所有的空白。對於OP，只需稍微調整瀏覽器的大小，空間就會消失:-) – Joe 2014-09-24 12:37:09

當然我可以看到它，但有些標記可以更容易地幫助並進行一些測試 – 2014-09-24 12:39:10

我會使用float屬性。 .inner是您嵌套colLeft和colRight的容器。這應該可以解決你的問題。

.inner { 
    overflow-x: hidden; 
    overflow-y: hidden; 
    position: relative; 
    margin: 0 auto; 
    width: 100%; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 
.colRight { 
    float: left; 
    width: 50%; 
} 
.colLeft { 
    padding-right: 10%; 
    float: right; 
    width: 50%; 
}

來源

2015-02-05 04:28:25

CSS列布局下的額外空間

回答

相關問題