CSS-如果剩余空间为'；这是有效的

我试图用不同大小的图像创建一个选项马赛克，因此需要填充自由垂直空间。有没有任何方法可以使用CSS，或者我是否需要以某种方式使用JavaScript

图片：

.选项{
宽度：1230px；
身高：100%；
保证金：自动；
位置：相对位置；
}
#小溪，大的{
宽度：400px；
身高：575px；
不透明度：0.8；
位置：相对位置；
浮动：左；
背景：白色；
}
#小溪，很大{
宽度：400px；
高度：380px；
边缘底部：10px；
不透明度：0.8；
位置：相对位置；
浮动：左；
背景：白色；
}
#中等{
宽度：400px；
高度：185px；
背景：白色；
边缘底部：10px；
不透明度：0.8；
位置：相对位置；
浮动：左；
}
#小河{
宽度：195px；
高度：185px；
背景：白色；
边缘底部：10px；
不透明度：0.8；
位置：相对位置；
浮动：左；
}

不太可能；这就是Javascript库的构建目的。砖石很容易使用，你应该可以把它放进去，让它把你的东西排列得更紧。

真是太遗憾了！谢谢

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