浮動小数点の空白が空白になる

Question

残りのスペースがページに沿って流れるときにdivのコンテナをすべて取得しようとしています。残りの上部スペースを埋めるために4番目のボックスを得る方法はありますか？ここで

は一例です：

.col { 
 
    float: left; 
 
} 
 
.col > div { 
 
    margin: 10px; 
 
    background-color: grey; 
 
} 
 
.one.col { 
 
    width: 8.33%; 
 
} 
 
.two.col { 
 
    width: 16.66%; 
 
} 
 
.three.col { 
 
    width: 25%; 
 
} 
 
.four.col { 
 
    width: 33.33%; 
 
} 
 
.five.col { 
 
    width: 41.66%; 
 
} 
 
.six.col { 
 
    width: 50%; 
 
} 
 
.seven.col { 
 
    width: 58.33%; 
 
} 
 
.eight.col { 
 
    width: 66.66%; 
 
} 
 
.nine.col { 
 
    width: 75%; 
 
} 
 
.ten.col { 
 
    width: 83.33%; 
 
} 
 
.eleven.col { 
 
    width: 91.66%; 
 
}

<div style="width:960px;margin:0 auto;"> 
 
    <div class="col six"> 
 
    <div style="height:500px;">1</div> 
 
    </div> 
 
    <div class="col three"> 
 
    <div style="height:200px;">2</div> 
 
    </div> 
 
    <div class="col three"> 
 
    <div style="height:300px;">3</div> 
 
    </div> 
 
    <div class="col three"> 
 
    <div style="height:300px;">4</div> 
 
    </div> 
 
</div>

Answer 1

あなたがそこに動的なコンテンツを持つように計画している場合、動的に正しい位置を計算するだろういくつかのJSのロジックを投げる必要があるだろう。

divの高さがわかっている場合は、上の余白をマイナスして上に移動することができます。

.col { 
 
    float:left; 
 
    } 
 

 
    .col > div { 
 
    margin:10px; 
 
    background-color:grey; 
 
    } 
 

 
    .one.col{width:8.33%;} 
 
    .two.col{width:16.66%;} 
 
    .three.col{width:25%;} 
 
    .four.col{width:33.33%;} 
 
    .five.col{width:41.66%;} 
 
    .six.col{width:50%;} 
 
    .seven.col{width:58.33%;} 
 
    .eight.col{width:66.66%;} 
 
    .nine.col{width:75%;} 
 
    .ten.col{width:83.33%;} 
 
    .eleven.col{width:91.66%;}

 <div style="width:960px;margin:0 auto;"> 
 
    <div class="col six"> 
 
    <div style="height:500px;">1</div> 
 
    </div> 
 
    <div class="col three"> 
 
    <div style="height:200px;">2</div> 
 
    </div> 
 
    <div class="col three"> 
 
    <div style="height:300px;">3</div> 
 
    </div> 
 
    <div class="col three"> 
 
    <div style="height:300px; margin-top:-100px;">4</div> 
 
    </div> 
 
</div>