html - 如何在不换行的情况下右对齐表格单元格中的 div？

Question

我无法提出适当解决方案的特殊要求:

对于带有 <div> 的表格单元格中的内容附加，我怎样才能右对齐 <div>同时防止整个细胞缠绕？

以下是我要考虑的内容:https://jsfiddle.net/c01y63k1/

table td:first-child {
  white-space: nowrap;
}

table td:first-child > div {
  margin-left: 1em;
  display: inline-block;
}

<h2>This works:</h2>
<table style="width: 200px">
  <tr>
    <td>
      Test test
      <div>
        float!
      </div>
    </td>
    <td>Div with a lot of content</td>
  </tr>
</table>

<h2>But...</h2>
<p>
Now my 'float!' is not right-aligned when there's extra space in the cell:
</p>

<table style="width: 500px">
  <tr>
    <td>
      Test test
      <div>
        float!
      </div>
    </td>
    <td>Div with a lot of content</td>
  </tr>
</table>

如您所见，当表格单元格的自动宽度小于内容的展开宽度时，上面的方法将起作用。但是，当表格单元格的宽度大于内容的宽度时，div不会右对齐(因为它不是)。

正在申请 float: right在 div 上将以与上述情况相反的方式工作。在这里看到:https://jsfiddle.net/ycutor3t/

table td:first-child {
  white-space: nowrap;
}

table td:first-child > div {
  margin-left: 1em;
  display: inline-block;
  float: right
}

<h2>This does not work:</h2>
<table style="width: 200px">
  <tr>
    <td>
      Test test
      <div>
        float!
      </div>
    </td>
    <td>Div with a lot of content</td>
  </tr>
</table>

<h2>But... this does!</h2>
<p>
Now my 'float!' is right-aligned when there's extra space in the cell:
</p>

<table style="width: 500px">
  <tr>
    <td>
      Test test
      <div>
        float!
      </div>
    </td>
    <td>Div with a lot of content</td>
  </tr>
</table>

Answer 1

你可以使用flexbox

td:first-child {
  display: flex;
}
td:first-child > div {
  margin-left: auto; /* Push it to the right */
}

<table style="width: 500px">
  <tr>
    <td>
      Test test
      <div>float!</div>
    </td>
    <td>Div with a lot of content</td>
  </tr>
</table>