Расставьте людей в «стол»

Question

Мне нужно составить список людей в следующем порядке

зеленый - директор, синий и серый: люди 2 отделов

Ограничения:

• все элементы должны быть одинакового размера , содержащиеся в том же родительском контейнере;
• таблица не должна содержать более 2 строк;
• родительская ширина является переменной / неизвестной;
• элемент fist (зеленый) является директором;
• следующие:
  • x элементов первого (синего) отдела и
  • y элементов второго (серого) отдела.

Кодовая ручка здесь

.container {
  display: table;
  border: 1px solid lightgray;
  width: 220px;}
article { width: 50px; max-height: 50px;min-height: 50px; background: gray; display: inline-block; border: 1px dotted;}
.dir {background: green; display: table-cell;margin-top: auto; margin-bottom: auto;}
.d1 {background: lightblue;}
.d2 {background: lightgray;}

<div class="container">
    <article class="dir">lft mid</article>
    <article class="d1">d11</article>
    <article class="d1">d12</article>
    <article class="d1">d13</article>
    <article class="d2">d21</article>
    <article class="d2">d22</article>
</div>

Некоторые объяснения:
У меня есть директор компании, а также коммерческие и исполнительные кадры.Директор должен возглавлять людей слева, вертикально по центру.коммерческие люди в верхней строке, исполнительные в нижней.Коробки должны иметь одинаковый размер.Кроме того, так как я делаю Angular foreach для получения элементов, все ящики должны находиться непосредственно в родительском элементе «контейнера».

Answer 1

Вы можете использовать CSS3 Grid layout, определить 2 явных строки высотой 50px и неявные столбцы шириной 50px каждая, затем добавить следующие ограничения к элементам сетки:

• Директор охватывает 2 строки (отначало 1-го до конца последнего) и принудительно вводится в 1-й столбец
• .d1 статьи находятся в 1-м ряду
• .d2 статьи во 2-м ряду

Вот и все, третья строка невозможна, если вы добавляете элементы, но они будут переполнены справа от вашего фиксированного контейнера сетки шириной 220px.Вам решать, нужно ли вам использовать MQ, горизонтальную полосу прокрутки или позволить ей переполниться.
2-й директор будет превосходить существующий, но он должен соответствовать вашим требованиям.Иначе, удалите этот grid-column: 1 и оставьте первый как первый элемент сетки, если хотите, чтобы он находился слева.

.container {
  display: grid;
  grid-template-rows: 50px 50px;
  grid-auto-columns: 50px;
  border: 1px solid lightgray;
  width: 220px;
}

.dir {
  grid-row: 1 / -1;
  grid-column: 1;
}

.d1 {
  grid-row: 1;
}

.d2 {
  grid-row: 2;
}

article { border: 1px dotted; }
.dir {background: green;}
.d1 {background: lightblue;}
.d2 {background: lightgray;}

<div class="container">
    <article class="dir">lft mid</article>
    <article class="d1">d11</article>
    <article class="d1">d12</article>
    <article class="d1">d13</article>
    <article class="d2">d21</article>
    <article class="d2">d22</article>
</div>

⇒ Codepen

Answer 2

Я обновил скрипту, чтобы включить все элементы непосредственно как родительский элемент для контейнера.

      .container {
  display: table;
  border: 1px solid lightgray;
  width: 220px;}
article {width: 50px;max-height: 50px;min-height: 50px;background: gray;display: block;border: 1px dotted;}
.dir {background: green;margin-bottom: auto;float: left;margin-top: 25px;}
.d1 {background: lightblue;margin-left: 0px;float: left;}
.d2 {background: lightgray;margin-left: 0px;float: left;}

<div class="container">
    <article class="dir">lft mid</article>
    <article class="d1">d11</article>
    <article class="d1">d12</article>
    <article class="d1">d13</article>
    <article class="d2">d21</article>
    <article class="d2">d22</article>
</div>