我想要一个使用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>

有什么要获得这种效果的？

解决方案

我们应该使用" float" CSS属性来执行此操作。在此处签出简单的实现。我们可以在此处找到更详细的文章

我想你可以做这样的事情。

div#col2 {
  padding-left: 160px;
  width: 100%;
}

div#col1 {
  float: left;
  width: 160px;
}

这取决于＃col2之前的## col1`，这可能使其不可用。

这不会，但是依赖于＃col1更长：

#content {
  position: relative;   
}
div#col2 {
  width: 160px;
  position: absolute;
}

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

这将使页脚保持在原位。

div#footer {
  clear: both;
}

以上两种都不起作用。

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

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

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