试图将文本放在图像前面

时间:2012-07-23 02:04:48

标签: css html css-float image

这是问题<{p>的site

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

我的问题是:

1)我无法获得标题为&#34; fp-banner&#34;收缩到70px的高度,同时包含文本。

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

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

谢谢。

1 个答案:

答案 0 :(得分: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,以防万一:)

希望这有帮助!

最佳,

辛西娅