html - 让div在它跳下来之前缩小

Question

我有两个并排的 div。两者都包含一个表。左边的比右边的小。

首先，我希望右边的那个能占用尽可能多的空间，而不会让左边的 div 跳下来。还。我希望这个正确的 div 随着窗口大小变小，直到它不能变小，然后它会跳下来。

现在发生的情况是，div right 首先向下跳，然后随着窗口变小而缩小。我想先尽可能缩小，然后如果窗口变小，它就往下跳。

希望你能明白我在说什么:

<div id="left">
    <table>
        <tr>
            <td>Content here is not so wide</td>
        </tr>
    </table>
</div>

<div id="right">
    <table>
        <tr>
            <td>Big table with lots of columns</td>
            <td>Big table with lots of columns</td>
            <td>Big table with lots of columns</td>
            <td>Big table with lots of columns</td>
            <td>Big table with lots of columns</td>
        </tr>
    </table>
</div>

Answer 1

您应该将这两个元素放在带有 display:flex 的容器中；

然后您就可以为第一个元素设置宽度，并为最大宽度调整另一个元素。还要为第二个元素添加最小宽度。

最后，您需要将这两个元素都显示为行内 block ，这样当第二个元素变小时，它会向下跳转。