Ng-repeat显示不正确的瀑布

Question

我遇到了ng-repeat的问题：它显示的内容像瀑布一样。我不认为它与我的css有关，因为它在拔毛器中的问题是相同的 图片：http://i59.tinypic.com/kah6qf.png

代码：

       <div class="panel panel-primary">
  <div class="panel-heading">
     <h3 class="panel-title">Products</h3>
  </div>
  <div class="panel-body">
     <ul>
        <li class="product-item" ng-repeat="product in products">
           <div class="product-img">
              <img src="{{product.productPic}}" alt="{{product.name}}" />
           </div>
           <div class="product-name-price">
              <p>{{product.name}} <span class="price">{{product.price}}</span>
              </p>
           </div>
        </li>
     </ul>
  </div>

Here's a Plunker

由于

Answer 1

它实际上是你的CSS。取出.product-img div上的浮动。

Answer 2

基本的CSS问题，我也会浮动列表项而不是图像 - Plunk

.product-item {
  background-color: #F5F5F5;
  float: left;
  width:25%;
}
.product-img {
  margin: 5px;
}