Question

所以我的表中有<td>，如下所示：

<tr> 
    <td>
        <p class="tableText">Random text that goes on REALLY long..........</p>
        <img src="www.imageurl.com/img.png" width="33vw">
    </td>
    <td>
        <p class="tableText">Random text that goes on REALLY long..........</p>
        <img src="www.imageurl.com/img.png" width="33vw">
    </td>
</tr>

我希望能够做的是，每个<td>的宽度是图像的width，然后文本在到达图像的width时应该换行到下一行。但是，文本只是在运行。

我可以用JS / JQuery，HTML或CSS来解决这个问题吗？（最好是html / css）

Answer 1

只需在width中提供与p相同的img，因为他们是兄弟姐妹。

＆＃13;

td {
  border: red solid
}
img {
  display: block;
  width: 33vw
}
p {
  width: 33vw
}

＆＃13;

<table>
  <tr>
    <td>
      <p class="tableText">Random text that goes on REALLY long..........</p>
      <img src="//dummyimage.com/100x100" />
    </td>
    <td>
      <p class="tableText">Random text that goes on REALLY long..........</p>
      <img src="//dummyimage.com/100x100" />
    </td>
  </tr>
</table>

＆＃13;

当我的td中达到图像宽度时，如何在我的td换行中创建文本？

1 个答案: