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（标题）之下。如您所见，内部DIV的字体大小为40px;

我期待内部DIV留在其父级内。

更新：我现在更加困惑，因为当我在此页面中运行“运行代码片段”时，内部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

两件事：

为#header设置严格的高度会使其保持在该高度，min-height在这种情况下可能更好。
使用clearfix＆＃34;方法＆＃34;可能有帮助。 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;
}

DIV不会留在其他DIV内

2 个答案: