保持寬度/高比例並正常使用div？

我仍然有點麻煩理解我的div。我試圖做一個網站，根據瀏覽器/屏幕大小來改變其大小。保持寬度/高比例並正常使用div？

伊夫得到了這一步：

我的html：

<div id="wrapper"> 
    <div id="header">Header</div> 
    <div id="left">Left</div> 
    <div id="right">Right</div> 
    <div id="footer">Footer</div> 
</div>

我的CSS：

#wrapper{width: 60%;} 

#header{width: 100%; padding-top: 11.00%;} 
#left{float: left; width: 27.5%; padding-top: 44%;} 
#right{float: left; width: 72.5%; padding-top: 44.00%;} 
#footer{clear: both; width: 100%; padding-top: 11.40%;}

現在我的div是完全正確的大小，問題是，瞬移總是在div的底部，但我需要它像一個正常的div，所以我可以做任何我想要的東西。什麼是使用它像一個普通的div最簡單的方法？

謝謝你的幫助！ :)

編輯：下面是它的樣子：http://jsfiddle.net/rswML/ ...正如我所說的問題是，文本總是在div的底部。我理解它是因爲填充頂端，但我需要它來保持高比例寬度，並仍然使用div通常。

來源

2013-03-24 user1985273

'問題是conect總是在底部？在哪裏連接 – mithunsatheesh 2013-03-24 04:54:15

對不起，我的內容。 – user1985273 2013-03-24 05:06:22

如果可能的話，你可以展示一些你想達到的東西的圖片..很容易理解你想達到的目標。 – jhunlio 2013-03-24 06:57:26

解決方法是，我必須製作標題div位置：relative，然後在其內部創建另一個div，該位置是absolute：absolute和width/height：100％。

來源

2013-03-24 14:41:58 user1985273

你在這裏嘗試的是一個快速響應的設計理念。我建議你爲此嘗試一下bootstrap框架。您可以通過簡單地向您的div添加一個類來完成所有工作。

自適應網頁設計（RWD）是一種Web設計方法旨在起草網站，以提供最佳的觀看體驗，便於閱讀和導航用最少的縮放，平移和滾動，跨廣泛的的設備

來源

2013-03-24 04:40:54 Techie

謝謝，但在這種情況下，不好意思嘗試發明我自己的自行車:) – user1985273 2013-03-24 14:04:44

我認爲這個問題可能與您的填充值有關。也許調整它們可以讓你擁有你想要的控制權，或者可能會讓利潤率更高。此外，不確定您是否希望排列元素#left和#right的頂部，但這些填充設置可能會呈現不同的值。帶百分比的padding-top屬性引用包含塊的寬度。希望有所幫助。乾杯。

來源

2013-03-24 06:00:15 songawee

謝謝你的安澤。我不能改變margin-top，因爲當我調整窗口大小時，它保持高度比。我還以爲元素高度相同，但不知何故相同的％使他們相同的高度，不同的％使得不同的高度。看看這裏：http://jsfiddle.net/rswML/。 – user1985273 2013-03-24 14:03:27

保持寬度/高比例並正常使用div？

回答

相關問題