css - 从跨度中创建列

Question

我收到 {patients} 并将其放入一个 div 中:

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

它包含姓名和姓氏，每行在两个范围内:

(开发工具)

(当前状态)

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

(扩展结果)

---编辑---

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

Answer 1

Flexbox 非常适合这种布局。通过给 .patient 包装器 display: flex;:

在每一行中创建 flexbox 布局

.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>