1.采用row 布局的row-warp 来处理
<div class="item item-icon-right"> <span>图片相册</span> <i class="icon ion-images royal" data-tap-disabled="true" ng-click="taskXCpicker()"></i> </div> <div class="row row-wrap item-calm" > <div class="col col-50" ng-repeat="(k,v) in images"><img ng-src="{{v.imgurl}}" style="120px;height:120px; "/> <p><button type="button" class="button button-small button-outline button-positive " ng-click="delimgs(v.imgurl)">删除</button></p></div> <div > </div> </div>
2.采用css 样式 clearfix处理
<div ng-if="showloading==false"> <div> <div class="col-48" ng-repeat="v in portalListData"> <a href="#/product_content/{{v.Id}}"> <img src="{{ENV.imgUrl}}{{v.ImgUrl}}" alt="" /> <p class="product-title">{{v.Title}}</p> <p class="product-price"> <span class="old-price"> ¥{{ v.MarkPrice }}</span> <span class="now-price">特价: <span class="price">¥{{ v.SellPrice }}</span></span> </p> </a> </div> <div class="clearfix"></div> </div> </div>
3.文本超出自动换行显示 采用item-text-warp
<div class="card"> <div class="item item-divider"> 物品信息 </div> <div class="item-text-wrap "> <div class="item item-thumbnail-left" ng-repeat="o in orderDetails.order_goods"> <!--<img src="{{ENV.imgUrl}}{{o.ImgUrl}}" onerror="this.src='img/ionic.png'">--> <img ng-src="{{ENV.imgUrl}}{{o.ImgUrl}}" /> <h2>{{o.GoodsTitle}}</h2> <p > <span class="red"> ¥{{o.RealPrice}}</span></p> </div> </div> </div>
4.展示效果