Question

我遇到了问题，因为当我将文字定位到邮件中时，下方会显示空白区域。

这是图片：

http://img713.imageshack.us/img713/6513/lllmm.jpg

这是我正在使用的CSS代码。我不知道错误在哪里。

    .thumbnail2{
    position:relative;
    width:100%;
    margin:0 auto;
}
.thumbnail2 img{
    width:100%;
        height:auto;
}
.thumbnail2 h1{
    display:block;
    position:relative;
    top:-90px;
    left: 0;
    padding-left:5px;
        background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
}
.thumbnail2 h1 span{
    font-size:34px;
    letter-spacing: -1px;
    line-height:40px;
}
.thumbnail2 h1 a{
    color:#FFF;
}

这是HTML / PHP（我在Wordpress中使用它）：

<div class="post">
                    <div class="thumbnail2">
                        <?php the_post_thumbnail('grandote'); ?>
                        <h1><span><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></span></h1>
                    </div>
                        <div class="excerpt2"><p><?php echo get_excerpt(280); ?></p></div>
                    <div class="clear"></div>
                </div>

Answer 1

从我收集的内容中，你想要的是在缩略图顶部显示文字。

您应该.thumbnail2 position: relative和.thumbnail2 h1 position: absolute。这样就可以了，之后你只需要在正确的位置找到h1标签，这次他的位置相对于他的父div元素。

Answer 2

尝试为相对定位的元素添加负边距：

.thumbnail2 h1{
    display:block;
    position:relative;
    top:-90px;
    left: 0;
    padding-left:5px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);

    margin-bottom: -90px; // This should fix it
}

我在将文本定位到图像时遇到问题

2 个答案: