Question

在我为朋友创建的网站中，我创建了一个标题（标记为div的标题），其中包含两个图像（也包含在div中）以及公司名称和口号（更多div）。

标题div的主要目的是包装所有标题内容以便于定位，并为标题启用背景图像。

问题是标题的背景图像拒绝填充实际标题内容的整个背景。它只填写我在头标记div上指定的填充。

在我的脑海中，似乎容器div的大小应与其细分的总和相同。大小。因此，为父div指定背景图像理论上应该提供填充所有子div的背景区域的背景。但是，在实践中，情况似乎并非如此。

任何人都可以告诉我我失踪的是什么吗？如何将图像作为整个标题的背景？我在此处发布了相关（通用）代码：http://codepen.io/deadwanderer/pen/LnGKC/

正如您所看到的，标题div的边框基本上充当了内容顶部的一条线，当它们应该是一个围绕它的框时。

感谢您提供任何帮助和/或建议！

Answer 1

你需要清除div，因为你有浮动div：

明确：两者;

试试这个：

<div class="header">
  <div class="leftpic">
     <img src="" alt="Left Image" class="pic"/>
  </div>
  <div class="rightpic">
    <img src="" alt="Right Image" class="pic"/>
  </div>
  <div class="hdrtext">
    <div class="companyName">Company Name</div>
    <div class="companySlogan">Company Slogan</div>
  </div>
  <div style="clear:both;"></div> <!-- Notice this added line -->
</div>

见证：http://codepen.io/anon/pen/cKByp

在此处阅读Clearfix：http://css-tricks.com/the-how-and-why-of-clearing-floats/

标题背景图像不包含所有标题内容

1 个答案: