css - 如何使背景适用于整个div

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

像这样清除你的花车：

<div style="clear: both;"></div>
<div id="view-all-statements"><a href="ddg-statements.html">View All Statements →&lt;/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需要，您将需要清除浮动。