html - div 内部的 div 高度问题

Question

我有一个高度为 15% 的 div，其中还有一个高度为 15% 的 div。内部 div 有一个<p>标签，这个<p>标签从内部 div 中删除，但是当我删除内部 div 的高度时，一切正常。这是我的html代码和CSS代码。

.header {
  background-image: url("images/headerBg.jpg");
  height: 15%;
  width: 100%;
}

.title {
  background-color: red;
  float: left;
  height: 15%;
}

<div class="header">
  <div class="title">
    <h2>Title</h2>

  </div>


</div>

请参阅下图以供参考。红色的东西是内部 div，“标题”应该在那个红色的东西里面，但它不是 html

标签： htmlcss

Answer 1

您需要在 .title 类中将高度更改为最小高度

.header{
   background-image:url("images/headerBg.jpg");
   height:15%;
   width:100%;
}
.title{
  background-color:red;
  float:left;
  min-height:15%;
}

它会给你以下视图（我只使用背景颜色而不是图像，你可以使用任何你想要的）。

您可以删除左侧浮动并使用宽度。

如果您要删除左侧浮动，则会出现这种外观

而且这个look会自带宽度，我刚刚加了100px，你可以根据自己的要求调整