CSS：如何將兩個DIV與自動高度並排放置到其容器的高度？

我正在爲一個客戶設計一個網站，我試圖讓兩個並排的DIV調整到100％的容器。我已經完成了並排，但我無法讓右側的DIV與左側的DIV保持一樣的高度。CSS：如何將兩個DIV與自動高度並排放置到其容器的高度？

你可以在這裏查看問題：http://www.campusmomlaundry.com/

的「挑戰」和「效益」的DIV應該是並排側和相同的高度，而無需手動指定高度。我怎樣才能做到這一點？

來源

2010-06-16 Jake Petroules

歡迎來到CSS框模型和佈局的混亂... :-) – 2010-06-16 03:58:20

-1用於鏈接到不再存在的活網站的鏈接 – kontur 2012-02-24 13:52:07

真的嗎？ -1爲幾乎兩年前發佈的死鏈接？ – 2012-02-25 04:08:38

你的問題是外部div是由內部內容自動調整大小的，內部內容是通過內容自動調整大小的。

你有兩個選擇：

使用的@ R0MANARMY答覆中提到後臺解決方案來創建兩個同樣高大的柱子的視覺錯覺。
將兩個內部div的高度設置爲相同的確切數字（使用px或em）
將外部div的高度設置爲確切數字。
玩display屬性，並嘗試像表格單元格等不同的值。請記住，這一個不適用於一些較舊的瀏覽器。（不僅IE，但也有一些舊的Firefox和Chrome版本）
使用一行兩列的簡單表格。

我意識到最後一個是最有爭議的。然而，這是你的問題的一個可能的解決方案，沒有理由你至少不應該評估。

（[呻吟]請，請，沒有人提詞「語義HTML！」有一個在我們的宇宙中沒有這樣的事。）

來源

2010-06-16 04:09:49

我結束了使用jQuery來自動同步DIV的高度彼此...這是一個黑客......但我猜桌子是少了一個黑客，儘管被認爲是自己和許多糟糕的設計。事實上，我認爲我應該使用表格。更好地擺脫最好的設計，而不是使用我猜測的全部黑客。 – 2010-06-16 04:14:33

-2

您是否嘗試過：height: auto;或height: 100%;？

來源

2010-06-16 03:38:37 Ben

有一個列表上的文章除了解決類似的問題，你可以用它作爲參考：Faux Columns。

來源

2010-06-16 03:39:11 R0MANARMY

這是我認爲的最佳選擇。接下來是使用JavaScript。 – 2010-06-16 04:08:03

-1

也許左邊DIV中的子彈點數？

來源

2010-06-16 03:39:49 Meiscooldude

我絕對不是一個Web開發人員。 – Meiscooldude 2010-06-16 04:45:26

如果是我。我會通過javascript解決這個問題。使用jquery你可以做...

$(document).ready(function() 
{ 
if($('#leftColumn').height() > $('#rightColumn').height()) 
{ 
    $('#rightColumn').height($('#leftColumn').height()); 
} 
else 
{ 
    $('#leftColumn').height($('#rightColumn').height()); 
} 
});

這應該這樣做。如果你喜歡我工作的人，並且你不喜歡使用JavaScript解決CSS問題。那麼你可能平平運氣。很多時候，使用JQuery的速度要快得多，然後使用「正確的方式」使用CSS。你大概可以花一整天時間試着讓它適應不同的風格組合。

來源

2010-06-16 04:16:11 MindingData

我確實這麼做了，但是請將您的代碼更改爲$（window）.load，因爲我試過$（document）.ready，並且啓動得太快。 – 2010-06-16 04:20:01

CSS：如何將兩個DIV與自動高度並排放置到其容器的高度？

回答

相關問題