html - float 元素填充顶部空白

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>