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

Question

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

列＃1 160 px 列＃2 100％（即空间的其余部分）。

我想先放置列＃2的格，所以我的布局是这样的：

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

什么必须获得这种效果呢？

Answer 1

你应该使用“float”CSS属性来做到这一点。查看simple implementation here。你可以找到更详细的一点article here

Answer 2

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

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 3

以上都不是。

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

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

这是假设第2列应该显示为左边栏，并以列1作为主要内容。

Answer 4

你必须使用float：留在第一栏和浮动：正确的第二列

Answer 5

虽然以前的问题是多年来，我为任何未来的参考和类似的情况下，这个有用的答案。

在标记#col2之前把#col1，您可以将其浮动的权利，如果你有LTR lauout（如果你有那么RTL布局浮到左）和给其他山坳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>