向左浮动 div

Question

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

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

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

如何让所有 div 流畅地向左浮动并填充空白的 space。我应该看看 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>

向左浮动 div

Fluidly float div left

css

css-float

flexbox