css - 试图将文本放在图像前面

Question

这是有问题的网站

我希望作为其自己的 div 的不透明栏与文本一起出现在 div 后面。这两个显然都在图像前面。

我的问题是：

1) 我不能让标题为“fp-banner”的 div 在包含文本的同时缩小到 70px 的高度。

2）白色边框一直延伸到底部，我不知道为什么。

我试图在此处发布所有代码，但是当我复制并粘贴它时，实际上会出现 html，所以我想我不会发布它。

谢谢你。

score 1 · Accepted Answer

让我先解决问题 #2 - 白色边框延伸到特色帖子图像下方，因为您将边框应用于容器元素 (#featured-post) 而不是图像本身 (#featured-post img)

因此，将#featured-post 的 CSS 更改为：

#featured-post {
    float: left;
    width: 370px;
    margin-left: 10px;
    padding:0;      
}

和 #featured-post img 的 CSS 到：

#featured-post img {
    border: solid 3px #fff;
    z-index: -1;
    margin:0;
    padding: 0;

}

对于问题 #1，将其添加到 #fp-banner：

height:70px !important ;

并将其添加到您的 CSS 中：

#fp-banner p { line-height:14px ; margin-bottom:8px }

您可能需要调整 #fp-banner p 样式的 margin-bottom 值以适应 70px 高度。

注意：在进行这些更改之前，不要忘记备份您的 style.css，以防万一:)

希望这可以帮助！

最好的，

辛西娅

1 回答 1