Question

可能重复：
why is my content showing outside the div?

我遇到一个问题，即div的背景样式不会覆盖嵌套在div中的所有内容。

这是一个jsfiddle来向您展示我正在谈论的内容

如何在不设置绝对高度的情况下，将div ddg-corner-statements中的灰色背景样式应用于div内的所有内容？

Answer 1

使用浮动时这是一个常见问题。有几个常见的解决方案：

使用clear: both在浮点数后添加div。 Example

<div style="float: left"></div>
<div style="float: left"></div>
<div style="clear: both"></div>

将两个浮点数添加到具有CSS属性overflow: auto的容器中。 Example

<div style="overflow: auto">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

使父元素成为浮点数。 Example

<div style="float: left">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

使用：在CSS伪元素之后。 Example

.parentelement:after {
    content: ".";
    display: block;
    height: 0; 
    clear: both; 
    visibility: hidden;
}

将设定高度添加到父元素。 Example

<div style="height: 200px">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

就个人而言，我使用选项2来简化和语义“

查看代码here的更新版本。

Answer 2

我想你想要将灰色背景颜色应用于所有内容：My Fiddle

清除你的花车：

<div style="clear: both;"></div>
<div id="view-all-statements"><a href="ddg-statements.html">View All Statements →</a></div>

Answer 3

灰色背景似乎是一个图像。尝试垂直重复它，看看会发生什么。

Answer 4

这将解决您的问题：

> .ddg-corner-statements {
>     padding: 10px 15px 1px;
>     background: url("../images/bg_story_resources_bot.gif") repeat-x scroll left bottom transparent;
>     display: inline-block; }

Answer 5

未应用背景，因为您的子元素已浮动并从流中取出。

.ddg-corner-sidebar ul li a {
    border-bottom: 1px solid #DDDDDD;
    border-top: 1px solid #F8F8F8;
    color: #333333;
    display: block;
    float: left;
    padding: 5px 0 9px;
    width: 100%;
}

如果您移除float:left;，背景将按预期执行。

如果需要float:left，您需要清除浮动。

如何使背景适用于整个div

5 个答案: