0

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

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;
}
4

1 回答 1

0

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

div.quickLinks {
    float:left;
}

如果您宁愿将背景渐变直接放在里面div.quickLinks，它会起作用。

请参阅此小提琴进行演示。

编辑 关于评论的背景：

当您浮动内容时，在这种情况下quickLinksContainer，父容器不知道内容有多大。因此，要使容器具有正确的大小，您必须指定它。例如像这样：

div.quickLinksContainer {
    height: 150px;
}

查看更新的小提琴

于 2013-03-07T09:14:01.350 回答