當div的高度相等時，CSS列不工作

我正在嘗試使一個類似於masonry的列不需要加載另一個JS插件。當div的高度相等時，CSS列不工作

我的HTML看起來像這樣

<div class="masonry"> 
    <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
    <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
    <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
    <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
     <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
     <div class="item"> 
     <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a> 

     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
     <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
</div>

CSS：

.masonry { 
    -moz-column-count:3; 
    -webkit-column-count:3; 
    column-count: 3; 
} 
.item { 
    width: 273px; 
    border:1px solid black; 
    background: lightgray; 
    display:inline-block; 
    vertical-align:top; 
    margin-right:50px; 
    margin-bottom:50px; 
}

不知道原因，但它似乎是列數不工作。第二行的最後一個元素向下拉，而不是浮動到第二行的右側。

更新：當塊具有相同的高度時會發生這種情況。當我改變內容，列開始的工作水平

請參閱搗鼓更清晰，並分享您對this.Thanks

http://jsfiddle.net/frontDev111/7Lcrt8kq/

來源

2014-11-22 FrontDev

那些列垂直堆疊，不是水平的經驗。如此這般：

item1 item4 item7 

item2 item5 

item3 item6

您可以通過簡單地刪除列數的屬性達到預期的行爲：http://jsfiddle.net/zephod/n42sqd4v/1/

編輯：如果你想充分砌築的行爲，我的建議是使用jQuery的砌體插件。它不僅會覆蓋很多你會錯過的邊緣案例，而且它還會在一系列廣泛的網絡瀏覽器中進行全面測試，並且需要一個非常有力的理由來重新發明。

來源

2014-11-22 18:43:31

我看到了，但是移除了列數，我失去了砌體外觀。我已經更新了關於這種行爲的問題。 – FrontDev 2014-11-22 18:58:23

砌體不要讓我使用css邊距，我應該將它們設置爲「陰溝」，如果您知道如何在響應性中更改陰溝，那將非常棒！ – FrontDev 2014-11-22 19:15:56

也許這是一個單獨的SO問題，因爲這似乎已經結束了？ – 2014-11-22 19:17:41

不，你的代碼正在工作。它只是沒有響應，如果你讓jsfidle瀏覽器窗口更大，你會看到清晰的3個colums。

來源

2014-11-22 19:15:54

我已更改我的代碼以顯示內容在塊中不同時列計數的行爲不同。如果你再次檢查小提琴，你會看到不同之處。 – FrontDev 2014-11-22 19:18:03

當div的高度相等時，CSS列不工作

回答

相關問題