CSS - 填充可用的剩余空间

Question

我正在尝试使用不同大小的图像创建选项拼接图，因此需要填充自由垂直空间。有什么方法可以使用 CSS 还是我需要以某种方式使用 JavaScript？

图片:http://imgur.com/TQYsNNC

<style>
  .options {
    width: 1230px;
    height: 100%;
    margin: auto;
    position: relative;
  }

  #stream .large {
    width: 400px;
    height: 575px;
    opacity: 0.8;
    position: relative;
    float: left;
    background: white;
  }

  #stream .big {
    width: 400px;
    height: 380px;
    margin-bottom: 10px;
    opacity: 0.8;
    position: relative;
    float: left;
    background: white;
  }

  #stream .medium {
    width: 400px;
    height: 185px;
    background: white;
    margin-bottom: 10px;
    opacity: 0.8;
    position: relative;
    float: left;
  }

  #stream .small {
    width: 195px;
    height: 185px;
    background: white;
    margin-bottom: 10px;
    opacity: 0.8;
    position: relative;
    float: left;
  }
</style>

Answer 1

不是真的；这就是 Javascript 库喜欢的 Masonry被 build 来做。 Masonry 易于使用，您应该可以将其放入并让它更紧密地排列您的元素。