如何在不换行的情况下右对齐表格单元格中的 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将不会右对齐（因为它不是）。

在div上应用float: right将以相反的方式与上述情况相反。在这里看到： 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

您可以使用弹性框

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>