左边一个跨度，右边一个跨度，其余的在下面

Question

使用此 HTML

<th>
  <span class="left" > text to the left  </span>
  <span class="right"> text to the right </span>
  and then a lot of text below
</th>

CSS 会将第一个文本放在左侧，第二个文本放在右侧，以及这两个文本下面的所有其他内容，就像 HTML 一样

<th>
  <div>
    <span class="left">text to the left</span>
    <span class="right">text to the right</span>
  </div>
  and then a lot of text below
</th>

与

th     {overflow:auto}
.left  {float:left}
.right {float:right}

有弹性盒子吗？但下面的文本不在自己的 div 或 span 中。

Answer 1

它必须在

th

标签中吗？有

div

会更容易。

table {
  width: 100%;
}

th {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

th span {
  flex-basis: 50%;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

<table>
  <tr>
    <th>
      <span class="left"> text to the left  </span>
      <span class="right"> text to the right </span> and then a lot of text below
    </th>
  </tr>
</table>