CSS三列布局，液中心，無左邊緣！

我都贊成基於CSS的佈局，但是這個我只是無法弄清楚。有一張桌子是哦，所以，容易：CSS三列布局，液中心，無左邊緣！

<html> 
<head><title>Three Column</title></head> 
<body> 
<p>Test</p> 
<table style="width: 100%; border: 1px solid black; min-height: 300px;"> 
<tr> 
<td style="border: 1px solid green;" colspan="3">Header</td> 
</tr> 
<tr> 
    <td style="border: 1px solid green; width: 150px;" rowspan="2">Left</td> 
    <td style="border: 1px solid yellow;">Content</td> 
    <td style="border: 1px solid blue; width: 200px;" rowspan="2">Right</td> 
</tr> 
<tr> 
    <td style="border: 1px solid fuchsia;">Additional stuff</td> 
</tr> 
<tr><td style="border: 1px solid green;" colspan="3">Footer</td></tr> 
</body> 
<html>

留下的是固定寬度
右是固定寬度
內容是液體
其他東西坐在內容下面

現在這裏是重要部分：「左」可能不存在。桌子也很容易。刪除列並擴展「內容」。美麗。我已經瀏覽了很多基於液體和桌子的三列CSS佈局的例子（和「聖盃」），但是我還沒有找到一個沒有在中間列使用某種剩餘空白的內容（「內容」）。因爲「內容」只會留在它的位置，所以一旦「左」消失，任何保證金餘額都將被吸收。

我只是要切換到舊學校爲基礎的佈局這個問題，所以我希望有人有一些想法 - 我不在乎多餘的標記，包裝等，我只想知道如何用純CSS解決這個問題。 BTW：看等高列多麼容易的......

乾杯

PS：沒有CSS3請

來源

2010-06-14 Dennis G

body { 
width: 600px; 
} 
.left { 
float: left; 
width: 200px; 
} 
.center { 
float: right; 
width: 100%; 
} 
.right { 
float: right; 
width: 200px; 
}

這應該留下被刪除

時讓.center擴大到全寬

來源

2010-06-14 20:36:38 antpaw

瀏覽器將中心設置爲整個窗口一樣寬，需要水平滾動是不合法的嗎？（我的印象是「100％」意味着「父元素的整個寬度」，而不僅僅是剩下的東西。） – cHao 2010-06-14 23:11:07

理論上它應該，但實際上這是行不通的。你會得到的是左邊的左邊，200px寬 - 下一條線100％（你定義的600px寬）.center和下一行右邊。右邊浮動。你不會讓列浮在一起。 – 2010-06-15 12:21:17

CSS三列布局，液中心，無左邊緣！

回答

相關問題