兩個列布局，其中一個在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>