将 2 个 div 并排放置，左侧填充空间答案

【问题标题】：Placing 2 divs next to each other with the left filling the space将 2 个 div 并排放置，左侧填充空间
【发布时间】：2012-11-01 11:19:12
【问题描述】：

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

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

谢谢

【问题讨论】：

在左边放一个width="auto"，然后用javascript设置右边的宽度。使 div 样式="display:inline"

标签： html css web styles

【解决方案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 文件中，然后试一试以了解其工作原理。

【讨论】：

这是一个新选项，但我更喜欢它似乎不起作用的相反方式？
将侧边栏更改为向右浮动，并将内容左边距更改为右边距。您可能需要更改侧边栏和内容的顺序.. 即.. 将侧边栏 div 放在内容 DIV 之后。

【解决方案2】：

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

<style>
    .left {
        width: auto;
    }

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

【讨论】：