浮動小数点数をCSSで動的高さで調整/スタックする方法は？

Question

私は任意のヘルプは非常に

をいただければ幸いあなたは下のギャップを見た場合、私は彼らがダイナミックな高さ を持つ一緒に固執する場合（のみ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>

Answer 1

これはあなたが達成しようとしているものだろうか？ この方法を使用する場合は、高さが.cの2つ（以上）の高さと積み重ねられた.D要素の合計を設定してください。

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

また、できるだけ少ないインラインCSSを使用してみてください。あなたのプロジェクトが成長しMVCのコンセプトに違反したときには面倒です。