css - 用跨度制作列

Question

我接收{patients}并将其放入一个 div 中：

<div className="patients">
   {patients}
</div>

它包含Name和Surname，每行分为两个跨度：

（开发工具）

（当前状态）

如何将这些跨度设置为列（类似表格）？

（扩展结果）

- -编辑 - -

变化的内容{patients}。这是搜索的结果，所以出现了不同的名字，有时更多，有时更少。我不能单独对它们应用样式。查看代码。

Answer 1

    <div class="patients">
      <div class="patient">
        <span>Eric</span>
        <span>Car</span>
         <span>Car</span>
      </div>
      <div class="patient">
        <span>Eric</span>
        <span>Car</span>
         <span>Car</span>
      </div>
      <div class="patient">
        <span>Eric</span>
        <span>Car</span>
         <span>Car</span>
      </div>
      <div class="patient">
        <span>Eric</span>
        <span>Car</span>
         <span>Car</span>
      </div>
    </div>

CSS
----

.patients {
  border: 1px solid black;
  display: table;
  width: 100%;
  border-bottom: none;
}

.patient {
  display: table-row;
}

.patient > span {
  display: table-cell;
  border-bottom: 1px solid black;
}

Answer 2

Flexbox 非常适合这种布局。.patient通过提供wrapper在每一行中创建 flexbox 布局display: flex;：

.patient {
  display: flex;
  justify-content: space-between;
}

该justify-content: space-between规则将跨度放置在可用空间的左右两端，这是我最喜欢 flexbox 可以做的事情之一。

.patients {
  border: 1px solid black;
  max-width: 250px;
}
.patient {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid black;
}
.patient span {
  padding: 0 20px; // gives a little space around each span
}
.patient:first-child {
  border-top: none;
}

<div class="patients">
   <div class="patient">
    <span>Eri</span>
    <span>Car</span>
   </div>
   <div class="patient">
    <span>Dude</span>
    <span>Ok</span>
   </div>
   <div class="patient">
    <span>Nice</span>
    <span>One</span>
   </div>
</div>

Answer 3

您可以将 display 与 table/table-row/table-cell 一起使用，或者使用带有修复的显示块，或者使每一行成为具有固定宽度的 flexbox 或其他解决方案。有很多方法可以实现这一目标。