帶3列的CSS流體佈局

下列布局中的B列出現錯誤。我設法使用http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/來製作3列布局。但是，這假設固定的列A和B具有相同的高度/具有相同的垂直起點。在我的情況B上面有另一個流體股利。帶3列的CSS流體佈局

alt text http://img191.imageshack.us/img191/1520/fluidlayout.png

我不知道如何使列B.誰能幫助？

謝謝！

更新：

我試圖使用顯示：表並顯示：表單元格，但不工作的IE8。它適用於Firefox。

<html> 
    <head> 
    </head> 
    <body> 
     <div style="display: table"> 
      <div style="display: table-cell"> 
       Column 1 
      </div> 
      <div style="display: table-cell"> 
       Column 2 
      </div> 
     </div> 
    </body> 
</html>

即使後來編輯：

爲了使上述IE8的工作，你需要添加代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

來源

2010-02-20 Victor Hurdugaci

有4種方式來做到這一點：

Faux columns。基本上欺騙用戶，通過創建一個包裝器並用分隔符給它一個背景圖像，讓這些列進入到頁面底部。在你的情況下，對於流體佈局，你必須做兩次，一次使用左對齊的bg圖像，另一次使用右對齊的圖像。
"One True Layout"。這是一個相當醜陋的黑客行爲，通過指定一個巨大的底部填充以及負底部邊距，然後隱藏溢出。它在實踐中運行良好，但存在許多小問題，例如無法應用底部邊界（請參閱鏈接以獲取完整列表）。
使用display: table的包裝並給列display: table-cell。我已經讀過，這在大多數瀏覽器中都可以使用，但還沒有嘗試過，所以沒有保證。
回到表格。 CSS在語義上是偉大的，但是有時候你別無選擇，只能犧牲機器語義來獲得體面的用戶體驗。

來源

2010-02-20 20:31:41

除非我誤解的問題，我不認爲等同於平等的矩形中的所有列的高度是他想要的東西，意義這可以在不使用上述情況下實現？ – Steve 2010-02-20 20:37:10

我可能誤解了意圖（目前尚不清楚），但從問題和圖像上來看，上述4個建議中的任何一個都可以工作，因爲兩列（在本例中爲中心和右邊）通常都是封裝，可以在不破壞佈局的其餘部分的情況下應用標題。 – 2010-02-20 20:55:20

我正在使用解決方案2，最後，我做了佈局，但它在IE上看起來不好。 :(現在就試試3，如果不工作，我會回到表格 – 2010-02-20 21:12:56

這樣做的邏輯過程是從DD模板上的當前位置移除B.

有中央div伸展佔用創造的額外空間。

其中有你想要的額外流體股利。

然後在其下方還有一個DIV並在您的流體股利和B.

來源

2010-02-20 20:34:17 Steve

這就是我'但是結果並不好，現在我管理一些東西，但在IE上看起來很糟糕。 – 2010-02-20 21:11:08

帶3列的CSS流體佈局

回答

相關問題