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>