Ng-repeat 像瀑布一样错误地显示答案

【问题标题】：Ng-repeat showing incorrectly like a waterfallNg-repeat 像瀑布一样错误地显示
【发布时间】：2014-10-03 18:13:46
【问题描述】：

我在使用 ng-repeat 时遇到了问题：它显示的内容就像瀑布一样。我认为这与我的 css 无关，因为它与 plunker 中的问题相同
图片：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

谢谢

【问题讨论】：

因为我不想那样

标签： css angularjs twitter-bootstrap-3

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：