Расставить людей «за столом»
Мне нужно составить список людей в следующем порядке
зеленый - директор, синий и серый: люди двух отделов
Ограничения:
- все элементы должны быть из тот же размер, содержащегося в контейнере тот же родитель;
- таблица не должна содержать более 2-х строк;
- ширина родительского элемента переменная / неизвестная;
- кулак (зеленый) элемент - директор;
- следующие:
- x элементов первого (синего) отдела и
- y элементов второго (серого).
CodePen - это здесь
.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 для получения элементов, все поля должны находиться непосредственно в родительском «контейнере».
Я тоже не уверен, что пойму. Зеленая рамка должна быть такого же размера, что и другая, и располагаться по центру, а серый и синий прямоугольники должны быть выровнены по правому краю? Вам нужно использовать стол или вы можете использовать что-нибудь еще?
У меня есть директор компании, а также ящики для коммерческого и исполнительного персонала. Режиссер должен возглавлять людей слева, вертикально по центру. коммерческие люди находятся в верхней строке, руководители - в нижней. Коробки должны быть одинакового размера. Кроме того, поскольку я использую Angular foreach для получения элементов, все поля должны находиться непосредственно в родительском «контейнере».
Я бы посоветовал вам использовать для этого неправильный макет (тем более, что иерархия компании, как правило, не является табличными данными); Я бы рекомендовал использовать сетку CSS: демонстрация.
Если макет необходим, мы можем стилизовать его таким же образом. Я обновил пример в ответе ниже.
Ответы 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>благодаря. зеленый квадрат не центрируется, а сдвигается сверху на 25 пикселей ...
Вы можете использовать макет сетки CSS3, определить 2 явные строки высотой 50 пикселей и неявные столбцы шириной 50 пикселей каждая, а затем добавить следующие ограничения к элементам сетки:
- директор занимает 2 ряда (от верха 1-го до конца последнего) и помещается в 1-й столбец
- .d1 статьи находятся в 1-м ряду
- .d2 статьи во 2-м ряду
Вот и все, третья строка невозможна, если вы добавляете элементы, но они будут переполняться справа от вашего фиксированного контейнера сетки шириной 220 пикселей. Вам решать, нужна ли вам MQ, горизонтальная полоса прокрутки или позволить ей переполниться.
Второй директор заменит существующего, но он должен соответствовать вашим требованиям. В противном случае удалите этот grid-column: 1 и оставьте 1-й элемент в качестве 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
интересный подход, исправь .dir { grid-row: 1 / -1; grid-column: 1; height: 50px; margin-top: auto; margin-bottom: auto; }
Я не совсем понимаю, что вы пытаетесь сделать. Вы можете быть более конкретными?