DIV不留其他DIV
问题描述:
里面我有一个ASP的表单,这个HTML:DIV不留其他DIV
#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保留在其父母的内部。
更新:我现在还混淆,当我在这个页面运行“的运行代码片断”一样,内格文保持内它的父。
答
这是由于您设置了最大高度,但使用宽度的百分比。您可以使用媒体查询来更正此问题,也可以设置最小宽度以防止出现此问题。
下面是一个例子修改您的#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;
}
}
+0
谢谢!好答案 –
答
两两件事为例:
- 设置一个严格的高度为
#header
将保持在那个身高,min-height
在这种情况下可能会更好。 - 使用
clearfix
“方法”可能会有帮助。 Clearfix是元素自动清除其子元素的一种方式。
*请注意:我使用的图像只是为了填充空间 - img
中的宽度/高度仅用于此图片,您可能不需要它。
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;
}
'的#header {最小宽度:400像素; } ...... – War10ck
@ Warl0ck:谢谢!我把它设置为800px,现在页面看起来不错。你可以提交这个答案。 –
与'800px'修复,当浏览器宽度低于这个宽度时会发生什么?水平滚动条? –