html - 如何将单列数据平均分布到两列数据中？

Question

我在 html 中显示一个表格，其中只有一列全名:

Full_name
  Alex
  Frown
  Chris
  Dram
  Drex
  Pheobe

我使用了一个 for 循环来显示名字。但我希望输出显示在两列中，分布均匀，如:

Full_name      Full_name
  alex          Frown 
  Chris         Dram
  Drex          Pheobe

Answer 1

您可以将名称分隔为两个数组，例如通过索引。如果索引除以 2 的余数为 0，则将其插入一个数组，否则将其插入另一个数组。

let fullNamesArr...
let fullNamesLength = fullNamesArr.length;

let leftColumn = [];
let rightColumn = [];

for (let i = 0; i < fullNamesLength; i++) {
  if (i % 2 === 0) {
    leftColumnt.push(fullNamesArr[i]);
  } else {
    rightColumn.push(fullNamesArr[i]);
  }
}

然后将两个表并排显示。

或者您可以使用样式。

1. 制作一个“header”，包含两个具有相同宽度 (300px) 的 div，两者包含字符串 Full_name。
2. 制作宽度为 的容器，例如600px。给它一个样式 display: flex; flex-wrap: 包裹;
3. 在该容器中添加 ngFor 元素并为其指定 300 像素的宽度。(以 600 和 300 为例)