html - 将 2 个 div 彼此相邻放置，左边填充空间

Question

我如何将两个 div 彼此紧挨着放置(左侧和右侧)，以便左侧 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>

您设置一个元素的宽度并将其 float ，然后通过在其上放置与 float 元素相同宽度的边距，将您想要位于其旁边的元素强制置于间隙中。

警告:在此示例中，侧边栏元素必须首先出现在您的源代码中。

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

将源代码保存到您的桌面上的一个 html 文件中，并尝试使用它来弄清楚它是如何工作的。