Как сделать div встроенным, но определенным образом?

0

У меня есть html-код для создания нескольких небольших ящиков, и у этого поля есть имя, данное от object(graphdata).

    <div ng-repeat="a in graphdata" class="inline">

<div class="legend-box"style="background-color:{{a.color}};">
</div>
      <p class="legend-name">
     {{a.projects}}
      </p>
 </div>
   </div>

Мне нужно выровнять эти поля в строках, одна строка должна содержать только 2 поля с именем. Я сделаю демо:

  [] box1      [] box2
  [] box3      [] box4
  [] box5      [] box6

[] указывают прямоугольник и box1, поле 2,... - это имена полей. проблема заключается в использовании ng-repeat. Как это сделать?

Теги:
ionic-framework

5 ответов

1
Лучший ответ
.inline {
     display: inline-block; /*This is the inline, but different*/
     width: 50%; /*You may add less, to accommodate margins*/
     box-sizing: border-box; /*Gets rid of issues with paddings*/
}
Поделиться
  • 0
    Очень правильный ответ, если вы спросите меня :-)
  • 0
    Это «сердце» любой грид-системы :)
Показать ещё 2 комментария
0

Вы должны установить фиксированную ширину и высоту в классы inline и legend-box.

Чтобы сделать его отзывчивым, вам также необходимо определить эти классы для разных медиа-запросов.

Поделиться
0

Когда вы отметили вопрос с помощью ionic-framework, я опишу свой ответ с помощью функций Ionic framework.

В документации Ionic вы можете найти примеры использования макета сетки.

В качестве возможного решения вы можете сделать это так:

<div class="row">
    <div ng-repeat="a in graphdata" class="col col-50">
        <div class="legend-box"style="background-color:{{a.color}};"></div>
        <p class="legend-name">{{a.projects}}</p>
   </div>
</div>
Поделиться
  • 0
    Этот ответ был бы хорош, если бы ОП использовала сеточную систему. На этом уровне знаний он может знать, а может и не знать о них.
  • 0
    Итак, хороший ответ, который хорошо задокументирован в ионной структуре, и где пользователю нужно только добавить 2 уже встроенных класса CSS, но только потому, что он использует grid, является причиной для понижения рейтинга? лол
Показать ещё 1 комментарий
0

Чтобы сохранить свои div и не использовать ul и lis, вы можете использовать Flex-box!

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Но имейте в виду, потому что он доступен только для молодого браузера!

Вы можете сделать так:

.parent {
 display: flex;
 align-content: flex-start;
}
.child {
 width: 50%;
}

Надеюсь, это поможет!

Поделиться
0

Используйте ul li вместо div. И установите свойство css в ul column-count:2.

Или вы можете float:left и width:50% каждого div. Его установят divs два столбца.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню