html - 把人安排在一个 "table"

Question

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

绿色是主任，蓝色和灰色:2个部门的人

约束:

• 所有元素都应具有相同的大小，包含在相同的父级容器中；
• 表格不应包含超过 2 行；
• 父级宽度可变/未知；
• 第一个(绿色)元素是导演；
• 以下是:
  • 第一个(蓝色)部门的 x 个元素和
  • 第二个(灰色)的 y 个元素。

CodePen 是 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 个 50 像素高的显式行和 50 像素宽的隐式列，然后向网格项添加以下约束:

• director 跨越 2 行(从第一行的顶部到最后一行的末尾)并被迫进入第一列
• .d1篇在第一行
• .d2 第2行文章

就是这样，如果您添加元素，则不可能出现第 3 行，但它们会从固定的 220 像素宽的网格容器右侧溢出。由您决定是否需要 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