我怎樣才能防止與容器寬度100％的div溢出

我想找到一個整潔的方式來讓我的頭寬度爲100％（所以我可以使用一個背景色，遍佈整個頁面），但同樣在它內部，我有兩個圖像，我想保持內聯，而不是互相溢出或互相推倒。我怎樣才能防止與容器寬度100％的div溢出

我現在有後續的CSS：

header {  
width: 100%; 
height: 150px; 
padding: 50px 50px 10px 50px; 
clear: both; 
background: #185f96;} 

#logo { 
float: left; 
width: 800px;}

#phone { float: left; width: 200px; }

標誌和電話都是頭內。如果你看看它的行動（www.dweeman.com/eb/sitetemplate.html），你可以看到，如果你把它縮小到某個特定點，電話信息會被放在橫幅下面。我可以將其設置爲靜態寬度，但這是不同網頁大小的問題。

我在標題內創建了一個額外的div，我在其中放置了徽標，並將電話留在了外面。這給了我想要的結果，但是我想知道是否有一個更好的方法來實現這個沒有額外的div。

（也可用於代碼段的格式對不起，我有麻煩它被整齊地格式化。似乎沒有正常工作）

來源

2014-02-11 dweeman

'溢出：隱藏;' –

@MrLister：'oveflow：隱藏;'隱藏的問題，不能解決它... :) – NoobEditor

@NoobEditor對於較小的屏幕，這兩個圖像太寬而無法放入窗口。唯一的解決方案是當它溢出時隱藏東西，或開始調整圖像大小。 –

以減少您的網頁，並使用填充％爲單位太爲。

header {  
width: 84%; 
height: 150px; 
padding: 5% 5% 1% 5%; 
clear: both; 
background: #185f96;} 

#logo { 
float: left; 
width: 800px;}

來源

2014-02-11 12:06:32 Sushan

在我這樣做之前，如果你看看我已經做了什麼，標題目前是100％，顯示在2004px。所以即使在100％的情況下，它似乎比我的所有內容都要寬泛得多。我似乎無法找到迫使100％成爲2004px的原因。 – dweeman

身體沒有填充物或邊緣，因此與窗戶一樣寬。標題的寬度爲100％，但是它還有一個50px的填充，這使得它的總寬度比身體更寬。解決方案：刪除所述填充。 –

你的窗口是2004px。你的左右填充是50px + 50px = 100px 所以你的總寬度將是2104px。所以要麼在寬度和填充中使用％，要麼在它們中使用px。 – Sushan

集width是百分比，然後從一個新的行添加到white-space:nowrap;到header防止事情

header {  
    width: 100%; 
    height: 150px; 
    padding: 50px 50px 10px 50px; 
    clear: both; 
    background: #185f96; 
    white-space:nowrap; /*added*/ 
} 

#logo { 
    float: left; 
    display:inline-block; /* or width in percentage */ 
} 

#phone {  
    float: left; 
    min-width: 20%; /* ammended */ 
}

來源

2014-02-11 12:08:04 NoobEditor

似乎沒有工作。 – dweeman

我怎樣才能防止與容器寬度100％的div溢出

回答

相關問題