Question

我正在尝试找到一种简洁的方法让我的标题宽度为100％（所以我可以使用遍布整个页面的背景颜色），但也在其中我有两个图像，我'我希望保持内联，不要互相溢出或互相推挤。

我目前有以下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。

（也很抱歉代码部分的格式化，我无法将其整齐地格式化。似乎无法正常工作）

Answer 1

使用填充减少页面并在填充中使用％unit。

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

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

Answer 2

设置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 */
}

如何防止容器宽度100％的div溢出

2 个答案: