將可垂直調整大小的Div推到包裝的底部。怎麼樣？

首先，你好。這個問題使我瘋狂，所以我希望能有一個簡單的解決方案將可垂直調整大小的Div推到包裝的底部。怎麼樣？

這裏是an image of what I wanted originally。

但我並不想用黑客來獲取Box 1和（Box 2 + Box 3）來相互擴展。所以我只是在包裝上使用背景顏色，所以不會注意到它們有不同的高度。

這是我現在有：

CSS

#wrapper { 
    background:   #000; 
    width:    50%; 
    float:    left; 
} 

#box1 { 
    background:   #FF0012; 
    width:    65%; 
    float:    left; 
} 

#box2 { 
    background:   #141; 
    width:    35%; 
    margin-left:  65%;  
} 


#box3 { 
    background:#AA1232; 
    width:    35%; 
    margin-left:  65%; 
}

HTML

<body> 

<div id="wrapper"> 

    <div id="box1"> 

    </div> 

    <div id="box2"> 

    </div> 

    <div id="box3"> 

    </div> 

</div> 

</body>

如果你想知道爲什麼我不上盒2和3的，因爲使用float: right;如果方框1低於方框2，則方框3將浮動在方框1下方而不是下方框2.

問題： 1.修正框3向包裝物的底 2.當行被插入在箱3和箱2，它們不應溢出 - 擴大包裝紙高度代替（因爲它我發佈了代碼）

如果我在框3上使用position: absolute; bottom: 0;，那麼當插入行並且框3變得太高時，它會溢出框2。

如何解決這個問題的任何想法？

來源

2009-06-16 mdc

當你說可調整大小時，你的意思是用戶可以調整它的大小，或者它會隨着更多文本變得更高？ – 2009-06-16 23:15:41

它會變得更高，更多的文字。 – mdc 2009-06-17 01:28:08

我知道它爲什麼讓你發瘋 - 你試圖通過非表格方式解決表問題。爲什麼？

我努力去認識表格功能：當我想要獨立的內容共享一個共同的垂直和水平邊緣時，通常意味着我需要一個表格。

編輯：爲了達到使用表格的目的，你需要1）使用rowspan使box 1跨越兩行，2）垂直對齊box 3的內容以確保它始終在底部。

例如，請參閱說明rowspan here的HTML。這幾乎是你想要的，只是擺脫表邊界，並添加valign =「底部」到第三個單元格。

來源

2009-06-16 23:32:05

將可垂直調整大小的Div推到包裝的底部。怎麼樣？

回答

相關問題