HTML/CSS 使表格全宽，同时使图像 float 在右侧

Question

我想使表格充满(剩余)宽度，而不会被“ float :右”图像推开。 (简化的)代码如下:

<div>
<img style="float: right;">
<table>
...
</table>
<p>Some text</p>
<p>Even more text</p>
...
</div>

如果为表格指定样式“width: 100%”，它将以全宽度显示在图像下方。如果我不设置宽度，它的最小尺寸可以容纳没有换行符的文本。我想让它填充图像左侧的所有空间(具有最小尺寸，因此在极端情况下它会被推开)。我找不到任何解决方案。

编辑:抱歉，也许我不清楚我想要的结果是什么样子，我创建了一个图像。棘手的部分是表格应该延伸到整个图像，并且文本应该直接从表格下方开始，即使图像更大(这是我无法使用 Flex 工作的部分)

Answer 1

你想尝试这个解决方案，你可以随意更改图像的大小

<div style="display: flex;">
<img src="img.png" style="float: right; width: 90%">
<table style=" width: 100%; border: 1px solid; ">
    <tr>
        <td style="border: 1px solid;">Some text</td>
        <td style="border: 1px solid;">Some text</td>
        <td style="border: 1px solid;">Some text</td>
        <td style="border: 1px solid;">Some text</td>
        <td style="border: 1px solid;">Some text</td>
    </tr>
    <tr>
        <td style="border: 1px solid;">Even more text</td>
        <td style="border: 1px solid;">Even more text</td>
        <td style="border: 1px solid;">Even more text</td>
        <td style="border: 1px solid;">Even more text</td>
        <td style="border: 1px solid;">Even more text</td>
    </tr>


</table>

<p>Some text</p>
<p>Even more text</p>
...
</div>