Css Ng像瀑布一样错误地重复显示

我对ng repeat有一个问题：它像瀑布一样显示内容。我不认为这与我的css有关，因为它在plunker中也是同样的问题 图片：

代码：

---

谢谢

这实际上是你的CSS。去掉.product img div.

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

---

因为我不想那样

       <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>

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