0

可能重复：
为什么我的内容显示在 div 之外？

我有一个问题，即 div 的背景样式没有涵盖嵌套在 div 内的所有内容。

这是一个jsfiddle向您展示我在说什么

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

4

5 回答 5

3

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

  1. 在浮动后添加一个 div clear: both。例子。

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

  2. 将两个浮动添加到具有 CSS 属性的容器中overflow: auto。例子。

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

  3. 使父元素浮动。例子。

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

  4. 使用 :after CSS 伪元素。例子。

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

  5. 向父元素添加设置高度。例子。

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

就个人而言，为了简单和语义，我使用选项 2

在此处查看您的代码的更新版本。

于 2012-10-12T13:15:33.073 回答
2

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

像这样清除你的花车：

<div style="clear: both;"></div>
<div id="view-all-statements"><a href="ddg-statements.html">View All Statements →&lt;/a></div>
于 2012-10-12T13:14:24.433 回答
1

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

于 2012-10-12T13:15:53.097 回答
1

这将解决您的问题：

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

没有应用背景，因为您的子元素被浮动并从流程中取出。

.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需要，您将需要清除浮动。

于 2012-10-12T13:18:38.860 回答