html - 将 2 个 div 并排放置，左侧填充空间

Question

如何将两个divs 并排放置（左右），以便左侧div自动调整大小，具体取决于右侧的宽度div。

例如，如果右边的容器很100px宽，而容器中的右边div很10px宽，那么左边div就是90px宽的。或者，如果右边div很40px宽，那么左边就很60px宽。

谢谢

Answer 1

这是我经常使用的技巧

<style>
    .sidebar {
        width: 600px;
        float: left;
        background: #00ff00;
    }

    .content {
        margin-left: 610px;
        background: #ff0000;
    }
</style>

<div class="sidebar">
    sidebar
</div>

<div class="content">
    content
</div>

您设置一个元素的宽度并将其浮动，然后通过在其上放置与浮动元素相同宽度的边距来强制您想要坐在它旁边的元素进入间隙。

警告语：在本例中，侧边栏元素必须首先出现在您的源代码中。

您可以通过更改一个元素的宽度和另一个元素的边距来动态调整列的宽度。

将源代码保存到桌面上的 html 文件中，然后试一试以了解它是如何工作的。

Answer 2

我同意上面的评论。只需确保float: right;您想要的 div 位于屏幕右侧。我会将此作为附加评论，但没有足够的代表这样做。

<style>
    .left {
        width: auto;
    }

    .right {
        width: 100px;
        float: right;
    }
</style>