将人安排在“桌子”中

Question

我需要按以下顺序排列人员名单

绿色是导演，蓝色和灰色：2个部门的人

约束：

• 所有元素的大小应相同，并包含在相同的父对象容器中；
• 该表最多只能包含2行；
• 父级宽度可变/未知；
• 拳头（绿色）是导演；
• 以下是：
  第一个（蓝色）部门的
  • x个元素和
  第二个（灰色）元素的
  • y个元素。

代码笔为here

.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网格布局，定义2个显式行50px-tall和每个隐式列50px-wide，然后将以下约束添加到网格项：

• 导演跨越两行（从第一个的顶部到最后一个的末尾），并被强制进入第一列
• .d1文章位于第一行
• .d2第二行上的文章

就是这样，如果添加项目，则不可能有第三行，但它们将从固定的220px宽的网格容器的右侧溢出。由您决定是否需要MQ，水平滚动条还是让它溢出。
第二任主任会代替现有的任职，但您的要求应该可以。否则，请删除该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>