Div的窗口大小調整位置

我有一個問題，我一直在拼命掙扎着整整一天。我有兩個div彼此相鄰排列。問題是當我調整瀏覽器窗口（較小）時，右側div跳轉到左側div下面。我爲包含的父級指定了一個固定寬度，並且確保兩個div內的寬度不超過父級div的寬度。我的標記：Div的窗口大小調整位置

<div class="parent"> 
    <div class="left">contents</div> 
    <div class="right">contents</div> 
</div> 

<style> 
.parent 
{ 
    width: 800px; 
} 

.left 
{ 
    float: left; 
    width: 305px; 
} 

.right 
{ 
    display: inline-block; (also tried float: left) 
    width: 480px; 
} 
</style>

我真的需要幫助，我要瘋了。謝謝

來源

2012-05-28 DextrousDave

爲什麼不嘗試浮動：正確的.right？ – Samson

我無法在Firefox 12中複製該文件，請參閱http://jsfiddle.net/jeroen/3RNKx/您是否擁有有效的文檔類型？ – jeroen

如果您認真對待項目發現的問題，那麼您需要提供一個鏈接。很明顯，這種佈局正受到其他未顯示的代碼的干擾。 – gmeben

這裏是你的代碼插入的jsfiddle：

http://jsfiddle.net/FHqtK/

必須有一些其他風格的干擾，因爲它的行爲只是罰款float: left這裏。

來源

2012-05-28 21:57:38 gmeben

Chrome的檢查元素顯示我包含的div具有比我指定的寬度更寬的寬度。我從字面上拿出代碼的代碼，但沒有解決它。我只是找不到是什麼原因導致它 – DextrousDave

@DextrousDave你最好提供一個鏈接到你的項目，因爲你提供的沒有理論問題。 – gmeben

你確定你的div是你指定的寬度嗎？他們可能有保證金或填充。另外，我希望您發佈的代碼與您正在使用的代碼不完全相同。樣式標籤應位於頭標籤內。

你的結構應該是這個樣子：http://jsfiddle.net/XEamY/

來源

2012-05-28 22:04:06

謝謝。樣式不在樣式表中。我從字面上把所有東西都從正確的div中取出來了，並且指定了這些寬度，我仍然有這個重新調整大小的問題。沒有辦法，我的寬度是錯的 – DextrousDave

我看不到你已經在任何地方指定了邊距或寬度。盒子模型有點奇怪，因爲實際的寬度是以width + border + padding來計算的。嘗試指定'margin：0; padding：0'。 –

另外，如果你正在浮動div，它們不應該是內聯塊。 –

試試這個：

.right { 
     display: inline-block; 
     white-space: normal; 
     width: 480px; 
    }

來源

2012-05-28 22:07:35 imhere

謝謝，但不起作用 – DextrousDave

如何設置父div的空白屬性nowrap？ – imhere

Div的窗口大小調整位置

回答

相關問題