我想制作一个网格,其中每行有两张图片。我正在使用 flex-wrap: wrap;它在 android 4.4+ 上运行良好,但不适用于低于 android 4.4 的系统。我想在不使用 flex-wrap 的情况下实现这一目标
这是我的看法:
<ion-view class="feeds-categories-view">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"> </button>
</ion-nav-buttons>
<ion-nav-title>
<span>Feeds Categories</span>
</ion-nav-title>
<ion-content scroll="true" class="has-header has-subheader">
<div class="row-cat row">
<div class="col col-50" ng-repeat="items in ProductList">
<img ng-src="{{items.image}}" width="100%" />
</div>
</div>
</ion-content>
</ion-view>
Controller :
.controller('Home-FeedsCtrl', function($scope) {
$scope.ProductList = [
{"id":"1","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"2","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"3","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"4","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"5","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"6","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"7","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"8","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"9","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
]
})
样式表:
.cat-img-box{
width: 50%
}
.row-cat{
margin-top: 15px !important;
flex-wrap: wrap !important;
}
.col-cat{
padding: 20px !important;
}
最佳答案
<div ng-repeat="(key, image) in images">
<div class="row" ng-show="$even">
<div class="col"><img src="images[$index]"></div>
<div class="col"><img src="images[$index+1]"></div>
</div>
</div>
Shi 可以工作。
引用: Create Row every after 2 item in Angular ng-repeat - Ionic Grid
关于html - 如何在没有 flex-wrap 的 ionic 框架中制作每行包含两个图像的图像网格 :wrap;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35332942/