如何使用CSS調整/堆疊具有動態高度的浮動div？

我有時間難以調整動態高度浮動DIV（僅適用於CSS）如果看到底部間隙我希望他們粘在一起有動力高度請在這裏檢查代碼的任何幫助，將不勝感激如何使用CSS調整/堆疊具有動態高度的浮動div？

.c { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
.D { 
 
    float: left; 
 
}

<div class="c"> 
 
    <div class="D" style="height:100px; background:blue; width:25%;"> 
 
    </div> 
 
    <div class="D" style="height:200px; background:green; width:25%;"> 
 
    </div> 
 
    <div class="D" style="height:100px; background:pink; width:25%;"> 
 
    </div> 
 
    <div class="D" style="height:120px; background:red;width:25%;"> 
 
    </div> 
 
    <div class="D" style="height:200px; background:red; width:25%;"> 
 
    </div> 
 
    <div class="D" style="height:150px; background:blue; width:25%;"> 
 
    </div> 
 
    <div class="D" style="height:100px; background:green; width:25%;"> 
 
    </div> 
 
    <div class="D" style="height:100px; background:pink;width:25%;"> 
 
    </div> 
 
</div>

來源

2017-10-07 Jacques Jules

您需要告訴我們您想要達到的效果，結果輸出應該是什麼樣子。 –

如果你注意到divs之間的差距，我想他們想自動調整像收緊沒有底部的差距 –

難道這是你想達到什麼樣的？如果最終使用此方法，請確保將高度設置爲.c兩個（或多個）最高和堆積的元素的總和。

https://jsfiddle.net/axelboberg/5pdpf6zh/

此外，嘗試使用盡可能少的內聯CSS越好。當您的項目增長並違反MVC概念時，它會變得雜亂無章。

來源

2017-10-07 10:15:54

如何使用CSS調整/堆疊具有動態高度的浮動div？

回答

相關問題