向左流畅地漂浮div

Question

这是我正在尝试做的事情与我正在做的事情的图像

基本上我把剩下的所有div都漂浮了，但因为第一个div的高度比其余的高，所以它留下了一个巨大的洞。

生成的div是商店集合中的产品。 而高大的第一个div是一个始终存在的过滤器菜单。

如何让所有div流畅地向左浮动并填充空白区域。 我应该看看柔性箱吗？它不是一种砖石/同位素的布局。只有第一个div有更高的高度

这里是我正在处理的页面： http://goo.gl/4LfgAx

Answer 1

希望这会有所帮助：

div.container{
  width: 250px !important;
  border: none;
}
div.container div.row{
  width: 100%;
  border: none;
}

div.container div.row div{
  border: 1px solid black;
  height: 50px;
  float: left;
  margin: 1px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-3" style="height: 100px;"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
  </div>
</div>