在不使用flex

Question

我在表格单元格中有两个跨度，其中包含内容，我希望能够在保持同一行的同时彼此独立地水平对齐。

目前，我可以通过更改text-align内的<td>来更改对齐方式。

我正在编写一个编辑器，并希望用户能够在可能的情况下为自定义对齐提供更强大的选项。有任何想法吗？

这是一个基本的码本，我还有一个描述我想要的位置的图像。表和基本CSS有可能吗？我不能使用flex或大多数现代CSS，因为它必须与Outlook和其他桌面电子邮件客户端兼容。

编辑：感谢目前为止的回复。我进行了一些搜索，看起来position: absolute和text-align-last对Outlook的支持很少。查看其他SO回答here和here。我想我将仅限于使用表格和基本HTML元素。我已经更新了这篇文章的标题/措辞和代码笔，以更好地反映问题。感谢。

Old Codepen

New Codepen

codepen的代码：

<table width=100%>
  <tr width=100% valign='bottom'>
    <td id='container'>
      <span class='first'>Hello!</span>
      <span class='second'>World!</span>
  </tr>
</table>

#container {
  text-align: center;
  background-color: gray;
}

.first {
  background-color: red;
  /* text-align: left; */
}

.second {
  background-color: green;
  /* text-align: right; */
}

Answer 1

代码对我来说很好。

＆＃13;

＆＃13;

    <div id='container'>
      <div class='inline first'>Hello!</div>
      <div class='inline second'>World!</div>
    </div>

    <style>
    .inline {
      display: inline-block;
    }

    #container {
      text-align: center;
    }

    /* @This doesn't work, what would? This does*/
    .first {
      position: absolute;
      left: 0px;
    }

    .second {
      position: absolute;
      right: 0px;
    }
    </style>

＆＃13;

＆＃13;

＆＃13;

使用position，您可以更改x和y轴上的路线。例如，这可行。 ：）

Answer 2

使用text-align-last: justify;可以实现对两个元素的调整，其他元素可以使用text-align个常规设置：

＆＃13;

＆＃13;

.inline {
  display: inline-block;
}

.first {
  background: red;
}

.second {
  background: green;
}

#container1 {
  text-align-last: justify;
}

#container2 {
  text-align: left;
}

#container3 {
  text-align: center;
}

#container4 {
  text-align: right;
}

＆＃13;

<div id='container1'>
  <div class='inline first'>Hello!</div>
  <div class='inline second'>World!</div>
</div>
<div id='container2'>
  <div class='inline first'>Hello!</div>
  <div class='inline second'>World!</div>
</div>
<div id='container3'>
  <div class='inline first'>Hello!</div>
  <div class='inline second'>World!</div>
</div>
<div id='container4'>
  <div class='inline first'>Hello!</div>
  <div class='inline second'>World!</div>
</div>

＆＃13;

＆＃13;

＆＃13;