DIV不留其他DIV

Question

里面我有一个ASP的表单，这个HTML：

#header { 
 
    width: 100%; 
 
    height: 80px; 
 
    border: solid black 5px; 
 
    background-color: lightyellow; 
 
} 
 
#companylogo { 
 
    float: left; 
 
    width: 60px; 
 
    height: 70px; 
 
} 
 
#titletext { 
 
    float: left; 
 
    font-size: 40px; 
 
    margin-top: 20px; 
 
    margin-left: 30px; 
 
}

<div id="header"> 
 
    <img src="~/Images/aaa.jpg" alt="Logo Image" runat="server" id="companylogo" /> 
 
    <div id="titletext">MY Health Survey</div> 
 
</div>

的问题是，当我做浏览器的宽度足够小，内格落在下父DIV（标题）。正如你所看到的，内部DIV的字体大小是40px;

我曾期待内部DIV保留在其父母的内部。

---

更新：我现在还混淆，当我在这个页面运行“的运行代码片断”一样，内格文保持内它的父。

Answer 1

这是由于您设置了最大高度，但使用宽度的百分比。您可以使用媒体查询来更正此问题，也可以设置最小宽度以防止出现此问题。

下面是一个例子修改您的#header选择

#header { 
    width: 100%; 
    height: 80px; 
    border: solid black 5px; 
    background-color: lightyellow; 
    min-width:500px; 
} 

及这里的扩大你的头时，它是利用媒体一定宽度以下查询

@media screen and (min-width: 500px) { 
    #header { 
    width: 100%; 
    height: 80px; 
    border: solid black 5px; 
    background-color: lightyellow; 
    min-width:500px; 
    } 
} 

@media screen and (max-width: 499px) { 
    #header { 
    width: 100%; 
    height: 200px; 
    border: solid black 5px; 
    background-color: lightyellow; 
    min-width:500px; 
    } 
} 

Answer 2

两两件事为例：

1. 设置一个严格的高度为#header将保持在那个身高，min-height在这种情况下可能会更好。
2. 使用clearfix“方法”可能会有帮助。 Clearfix是元素自动清除其子元素的一种方式。

*请注意：我使用的图像只是为了填充空间 - img中的宽度/高度仅用于此图片，您可能不需要它。

Here is a fiddle of it.

HTML：

<div id="header" class="clearfix"> 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Radiation_sign_round.svg/520px-Radiation_sign_round.svg.png" width="100" height="100" alt="Logo Image" runat="server" id="companylogo" /> 
<div id="titletext"> MY Health Survey</div>  
</div> 

CSS：

#header { 
    width: 100%; 
    min-height: 80px; 
    border: solid black 5px; 
    background-color: lightyellow; 
} 

#companylogo { 
    float: left; 
    width: 60px; 
    height: 70px; 
} 

#titletext { 
    float: left; 
    font-size: 40px; 
    margin-top: 20px; 
    margin-left: 30px; 
    display: block; 
} 

.clearfix:after { 
    content: " ";/* Older browser do not support empty content */ 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
}