如何进行 2 列布局，其中一列具有固定宽度，另一列具有剩余宽度？答案

【问题标题】：How can I have a 2 column layout with one of the columns with a fixed width and the other with the remaining width?如何进行 2 列布局，其中一列具有固定宽度，另一列具有剩余宽度？
【发布时间】：2011-10-02 00:38:12
【问题描述】：

我有一个 2 列布局。左列的宽度为 300 像素。我希望右列占据剩余监视器空间的整个宽度。但我就是想不通如何使 px 和 % 的这种混合物起作用？有人有什么想法吗？

我想更糟糕的是我可以使用 js 来获取用户的视口宽度并动态添加一些内联样式，但是我必须在每次调整窗口大小时都执行该操作，等等。所以我宁愿有一个纯 css 解决方案。

【问题讨论】：

见How to properly float two columns side by side with css。

标签： html css

【解决方案1】：

我更喜欢thirtydot's answer:

Demo fiddle.

最低 CSS 要求：

#sideBar {
    width: 300px;
    float: left;
}
#mainContent {
    overflow: hidden;
}

【讨论】：

你是对的，当我缩小分辨率时，另一个解决方案失败了，在这种情况下，右列的宽度小于整个页面的宽度。但这很好用。我在发布之前尝试过这个，但在第二列留下了一个浮动，导致它失败。

【解决方案2】：

一种方法是将固定宽度的列浮动到左侧，然后使用边距来模拟您的另一列。像这样的：

<div id="sidebar">
    <!-- ... -->
</div>
<div id="content">
    <!-- ... -->
</div>

还有一些 CSS：

#sidebar {
    float: left;
    width: 300px;
}
#content {
    margin-left: 300px;
}

带有默认display:block 的<div> 自然会占据所有可用宽度。 300px 的左边距为固定宽度的列留下了一个开放空间。

示例：http://jsfiddle.net/ambiguous/wdsbu/

【讨论】：

【解决方案3】：

这是一种可能的方法：http://jsfiddle.net/mqchen/RDLMm/

【讨论】：

这种方法只有在两列的高度已知且相等的情况下才有效吗？