0

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

Column#1 160 px Column#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>

什么必须得到这个效果？

4

5 回答 5

1

以上都行不通。

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

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

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

于 2008-09-27T20:26:44.157 回答
0

您应该使用“float”CSS 属性来执行此操作。在这里查看一个简单的实现。你可以在这里找到更详细的文章

于 2008-09-27T20:22:45.913 回答
0

我认为你可以做这样的事情。

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

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

这依赖于#col1来之前#col2，这可能使它无法使用。

这不会，但依赖于#col1更长的时间：

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

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

这将使页脚保持在原位。

div#footer {
  clear: both;
}
于 2008-09-27T20:23:36.350 回答
0

您必须在第一列上使用 float:left 并在第二列上使用 float:right

于 2013-04-02T15:20:24.800 回答
0

虽然这个问题是多年前的问题，但我为任何未来的参考和类似案例提供了这个有用的答案。

将#col1before#col2放入标记中，您可以将其浮动到右侧，以防您有 LTR lauout（如果您有 RTL 布局，则浮动到左侧）并给出另一个 col overflow: hidden。

请注意，父 ( #content) 也应该有overflow: hidden：

#content{
  overflow: hidden;
  padding: 20px 0;
  height: 100px;
  background-color: #cdeecd;
}

#content #col1{
  float: right;
  width: 160px;
  height: 100px;
  background-color: #eecdcd;
}

#content #col2{
  height: 100px;
  overflow: hidden;
  background-color: #cdcdee;
}
<div id="content">
     <div id="col1"></div>
     <div id="col2"></div>
</div>

于 2015-12-26T06:28:32.243 回答