如何使div元素站在一行，有些div不能向左浮动

Question

我正在使用带有django模板的bootstrap，我使用产品元素（不同高度的div）填充主要内容。由于高度的差异，一些div不能正常浮动，我在下面放了一个截图。我该如何解决呢？以下是生成内容的代码：

<div class="panel-body">
  <div class="row product-container">

      {% for product in products %}
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
          <div class="product_unit">
            <img src="http://placehold.it/480x400" alt="">
            <div id='quick-view'>
              <a href="#">product.name</a>
            </div>
            <div class="product_unit_desc">
              <h4>{{ product.name }}</h4>
              <div class="ratings">
                <p class>12 reviews</p>
                <p>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star-empty"></span>
                </p>
              </div>
              <p>$12.43</p>

            </div>
          </div>
        </div>
      {% endfor %}

    <!-- DYNAMIC GENERATED CONTENT BY DJANGO -->

  </div> <!-- END OF ROW  -->

</div>

编辑：float: left;没有帮助