HTML/CSS 使表格全宽，同时具有浮动右图像

Question

我想制作一张完整（剩余）宽度的桌子，而不会被“浮动：正确”图像推开。 （简化的）代码是这样的：

<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>

Answer 2

<div style="width:100%;">
<div style="max-width:50%; 
float:left;display:block;">
<table border=1 
 cellpadding=60px>
 <tr>
 <th>1</th>
 <th>2</th>
 <th>3</th>
 </tr>
 <tr>
 <td>1</td>
 <td>2</td>
 <td>3</td>    
 </table>

<p>Some text</p>
<p>Even more text</p>
 ...
</div>
<div style="max-width:50%; float:right;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ37waf3hj3eVvTy40XYee0lQ6uVGJTx7m3Q&usqp=CAU" 
style="float:right; 
height:auto; 
width:100%; display:block;">
 </div>
 </div>