浮动元素填充顶部空白区域

Question

我正在尝试让我的div容器填充所有剩余的空间，因为它们沿着页面流动。有没有办法让第四个盒子填满剩余的顶部空间？

以下是示例：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>