HTML / CSS：子元素从父div溢出您如何使div完全包含子内容？

如何解决HTML / CSS：子元素从父div溢出您如何使div完全包含子内容？

| 在此示例中，您将看到包含div的边框为红色。但是，您还注意到子范围跨越父div的边缘。为什么会这样，如何解决此问题，使包含的div包含范围的全部内容？     

解决方法

        将ѭ2的

line-height

更改为

22px

似乎可以解决问题。 演示：jsfiddle.net/7mnP3     ,        我想我已经隔离了您所指的部分代码：

<div class=\"entry-utility\">
  <span>
    <h2><a href=\"#\" title=\"##\" rel=\"bookmark\">New Design For Keep Skatin’ Bro</a></h2> 
    Posted in <a href=\"#\" title=\" \" rel=\"category tag\">Animation</a>,<a href=\"#\" title=\" \" rel=\"category tag\">Photography</a>,<a href=\"#\" title=\" \" rel=\"category tag\">Uncategorized</a>,<a href=\"#\" title=\" \" rel=\"category tag\">Videography</a>,<a href=\"#\" title=\" \" rel=\"tag\">Joe Pea</a>,<a href=\"#\" rel=\"tag\">Raquel Pea</a>,<a href=\"#\" rel=\"tag\">test</a> on <a href=\"#\">May 27,2011</a>.
  </span>                                            
</div><!-- .entry-utility -->

这是无效的HTML，因为您在（inline）

span

内嵌套了一个

h2

，跨度将不包含边框和填充-但是，为了显示这实际上如何影响CSS显示，如果您使

.entry-utility span {display: block;}

应该获得红色边框包含您想要的内容。但是我想我更愿意解决嵌套问题，因为也存在太多强制定位。 制作

h2

display: inline;

使其像嵌入式元素一样显示时，您不能更改元素的性质，它仍然是块级元素。