Css3 快速链接容器背景

Question

我有以下用于快速链接容器的 CSS3 代码。我不知道为什么，但渐变背景不在文本下方。如果我从 div.quicklinks 中删除 float: left，我将显示渐变背景，但我想在左侧显示一些文本。谢谢

div.quickLinksContainer {
    clear:both;
    border-top: 1px solid #999999;
    text-align:center;
    margin: auto;
    width: 100%;
    padding: 10px;
    background-image: linear-gradient(bottom, rgb(179,175,176) 49%, rgb(237,237,237) 75%);
}
div.quickLinks {
    font-size: 12px;
    float:left;
}
.quickLinks h2 {
  color:#666666;
  font-size:14px;
  font-weight:bold;
  margin-bottom:10px;
}
.quickLinks li a {
  color:#555555;
  text-decoration:initial;
}

Answer 1

背景不在内容后面的原因是

div.quickLinks {
    float:left;
}

如果您更愿意将背景渐变直接放在 div.quickLinks 中，它会起作用。

参见 this fiddle用于演示。

编辑关于评论的背景:

当您 float 内容时，父容器(在本例中为 quickLinksContainer)不知道内容有多大。因此，要使容器具有正确的大小，您必须指定它。比如像这样:

div.quickLinksContainer {
    height: 150px;
}

参见 updated fiddle