使列超出范围

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包装器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>

Answer 3

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