浮動元素填充頂部空白空間

Question

我想讓我的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;">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>