我怎样才能防止与容器宽度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溢出

回答

相关问题