试图将文本放在图像前面

Question

这是问题<{p>的site

我希望不透明的条形图（它自己的div）显示在带有文本的div后面。两者显然都在图像的前面。

我的问题是：

1）我无法获得标题为＆＃34; fp-banner＆＃34;收缩到70px的高度，同时包含文本。

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

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

谢谢。

Answer 1

让我首先解决问题＃2 - 白色边框延伸到精选帖子图片下方，因为你将边框应用于容器元素（#features-post）而不是图像本身（#features-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，以防万一：）

希望这有帮助！

最佳，

辛西娅