css - 两列布局，其中一个在 CSS 中具有固定宽度

Question

我想要一个使用 CSS float 的漂亮的 2 列布局。

第 1 列 160 像素第 2 列 100%(即剩余空间)。

我想先放置 Col#2 的 div，所以我的布局如下所示:

<div id="header"></div>
<div id="content">
     <div id="col2"></div>
     <div id="col1"></div>
</div>
<div id="footer"></div>

需要什么才能达到这种效果？

Answer 1

以上都行不通。

div#col2 {
    width: 160px;
    float: left;
    position: relative;
}

div#col1 {
    width:100%;
    margin-left: 160px;
}

假设第 2 列应显示为左侧边栏，第 1 列为主要内容。