css - 流畅地向左浮动 div

Question

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

基本上我将所有 div 都向左浮动，但是因为第一个 div 的高度比其余的高，所以它留下了一个大洞。

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

我如何让所有的 div 流畅地向左浮动并填充空白区域。 我应该看看 flex box 吗？它不是砖石/同位素布局。只有第一个 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>