在CSS佈局中間列不包裝

Question

編輯：好的，所以我在這裏有點損失。其實，在很多損失。我正在認真考慮增加對CSS的個人仇恨和反直覺。

所以我試圖做出3列布局。它曾經基於Holy Grail layout，但後來我決定不需要流動性或相等的柱高，並開始修改CSS以更好地滿足我的需求。

首先，中間列中的文本（而不是包裹）不斷拉伸中間列，將其移動到左列下。我實現了@ ZincX建議使用固定寬度的列（請參閱下面的文章）。這固定了柱子，但是它們周圍的容器並沒有與它們一起伸展。如果您打開我的網站（請參閱下面的鏈接），則標題後面會隱藏一個完整的頁腳。

此外，我決定做分級標記 - 我將標題移動到源代碼的底部，並將其放在絕對位置的頂部。我可能會盡快與左側導航欄一起完成此操作。對於那些不熟悉這種做法的人，我前幾天也只是瞭解到這一點 - 將重要內容放在頁面的頂部，這使得搜索引擎更加友好。

那麼如何解決這個龐大的佈局問題？我只想要一個簡單的「標題，三列，頁腳」佈局。以像素爲單位提供絕對位置，即使是在大多數瀏覽器中都能很好地顯示的好習慣？

Here's the site I'm working on。
And here's my stylesheet。

Answer 1

我已成功將Soh Tanaka's Layout轉換爲3列。這並不完美 - 看起來，使用CSS，什麼都不是 - 但這是一個開始。

My version有點亂，但它可以很容易地成爲嘗試做這種事情的人的開始。這是一個version with the left/right columns swapped。

注意DOCTYPE - 如果它是HTML 4.01，它可能需要更改爲XHTML Transitional;否則，佈局可能無法在IE中運行。或者也許它可能。

Answer 2

你需要的是一個固定寬度的左列和固定寬度的右列和一個左右邊距的中間列。

做到這一點的方法如下：

#col_left { 
    display: block; 
    position:absolute; 
    top:0; 
    left:0; 
    bottom:0; 
    width:200px; 
} 

#col_right { 
    display: block; 
    position:absolute; 
    top:0; 
    right:0; 
    bottom:0; 
    width: 200px; 
} 
#col_middle { 
    display: block; 
    position:absolute; 
    top:0; 
    right:0; 
    bottom:0; 
    right:0; 
    margin-left:200px; 
    margin-right:200px; 
} 

Answer 3

我不知道如果我完全理解你的問題，但測試這個示例代碼，看看它是否實現了你的目標是什麼做（我用它打了很多，所以有可能是不需要的CSS的部分）：

CSS：

* { margin:0; padding:0; border:none; } 
#header { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    height:75px; 
    background-color:#666666; 
} 

#belowHeader { 
    position:absolute; 
    top:75px; 
    left:0; 
    right:0; 
    height:auto; 
    min-width:604px; 
    text-align:center; 
} 

#colLeft { 
    height:auto; 
    min-height:100px; 
    float:left; 
    width:200px; 
    background-color:#888888; 
} 
#colMiddle { 
    height:auto; 
    min-height:150px; 
    width:200px; 
    display:inline-block; 
    background-color:#999999; 
} 
#colRight { 
    float:right; 
    height:auto; 
    min-height:100px; 
    width:200px; 
    background-color:#888888; 
} 

#footer { 
    position:absolute; 
    bottom:-75px; 
    left:0; 
    right:0; 
    height:75px; 
    background-color:#666666; 
} 

HTML正文：

<div id="header"></div> 
<div id="belowHeader"> 
    <div id="colLeft"></div> 
    <div id="colMiddle"></div> 
    <div id="colRight"></div> 
    <div id="footer"></div> 
</div> 

我敢肯定的最小寬度和最小高度性能上IE6不會工作，但它是一個開始。如果您不害怕打破IE6或7，您可以使用display：table和display：table-cell來代替使用實際表格。