html - CSS:以类似表格的方式分布非表格元素

Question

有一个包含动态生成的 <span> 的 div是否有可能以类似表格的方式显示它们并决定哪个进入表格的哪一列？这是我的:

<div>
<span class="left">LEFT1</span>
<span class="right">RIGHT1</span>
<span class="left">LEFT2</span>
<span class="center">CENTER1</span>
</div>

这就是我想要实现的(我指的不是代码而是可视化，所以请运行代码片段):

<table>
  <tr>
    <td>LEFT1</td>
    <td>CENTER1</td>
    <td>RIGHT1</td>
  </tr>
  <tr>
    <td>LEFT2</td>
  </tr>
  </table>

不幸的是，我无法生成表格或更改 <span> 的顺序

Answer 1

Don't do this unless there is no other option just change your markup!

如果您出于某种未知原因必须绝对使用它。
这是将 .center 类居中的 css。
将 .right 放在右边。并将第二个左边放在新的一行上。

div {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 2em;
}
.center {
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.left:nth-of-type(3) {
  position: absolute;
  bottom: 0px;
  left: 0px;
}
.right {
  float: right;
}

<div>
  <span class="left">LEFT1</span>
  <span class="right">RIGHT1</span>
  <span class="left">LEFT2</span>
  <span class="center">CENTER1</span>
</div>