试图将文本放在图像前面

Question

这是出现问题的站点

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

我的问题是：

1） 我无法使标题为"fp-banner"的div在包含文本的同时收缩到70px的高度。

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

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

谢谢。

Answer 1

让我先解决问题#2-白色边框延伸到特色文章图像下方，因为您将边框应用于容器元素（#featurepost），而不是图像本身（#feature 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横幅：

height:70px !important ;

并将其添加到您的CSS:中

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

您可能需要调整#fp banner p样式的边距底部值，以适应70px的高度。

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

希望这能有所帮助！

最佳，

Cynthia