Question

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

第1列160 px 第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列应显示为左侧边栏，以col 1为主要内容。

Answer 2

您应该使用“float”CSS属性来执行此操作。查看simple implementation here。你可以找到更详细的article here

Answer 3

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

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;
}

Answer 4

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

Answer 5

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

在#col1之前放置#col2标记，如果你有LTR lauout（如果你有一个RTL布局然后浮动到左边），你可以将它漂浮到右边，然后给另一个col overflow: hidden。

请注意，父（#content）也应该有overflow: hidden：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

5 个答案: