Question

我有一个快速链接容器的CSS3代码。我不知道为什么但渐变背景不在文本之下。如果我从float: left移除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;
}

Answer 1

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

div.quickLinks {
    float:left;
}

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

请参阅this fiddle了解演示。

修改关于评论的背景：

当您浮动内容时，父容器（在本例中为quickLinksContainer）不知道内容有多大。因此，要使容器具有正确的大小，您必须指定它。例如：

div.quickLinksContainer { height: 150px; }

请参阅updated fiddle

Css3 quicklink容器背景

1 个答案: