浮动元素填充顶部空白空间

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>