Nano Hash - криптовалюты, майнинг, программирование

Как сделать сетку изображений с двумя изображениями в каждой строке в ionic framework без flex-wrap:wrap;

Я хочу сделать сетку, в которой я хочу два изображения в каждой строке. Я использую 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('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;
}
ionic-framework html css angularjs
11.02.2016

  • используйте float: left в CSS.. Как .cat-img-box{ width: 50%; float:left:} 11.02.2016
  • Как использовать float после двух элементов? 11.02.2016

Ответы:


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

Шис мог работать.

ссылка: Создать строку каждый после 2 элементов в Angular ng-repeat — Ionic Grid

11.02.2016

2

Поместите этот css в свой файл css.

.row .col:nth-child(2n+1){float:none;}

Это сделает поплавок пустым после 2-го элемента цикла.

11.02.2016
  • Хотя ответ только с кодом решает проблему для оператора, он не рекомендуется, поскольку он не представляет никакой ценности для будущих посетителей, ответ, который только дает, быстро будет помечен как очень низкое качество, и в результате этого он будет удалил быстро. отредактируйте свой ответ, чтобы включить объяснение того, что делает предоставленный код. 11.02.2016
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..