0

テキストをメッセージに配置すると、下に空のスペースが表示されるため、問題が発生しています。

これは画像です:

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>
4

2 に答える 2

1

私が集めたものから、サムネイルの上にテキストを表示することができます。

あなたは与えるべき.thumbnail2 position: relativeであり、.thumbnail2 h1 position: absolute。これでうまくいきます。その後、h1タグを適切な場所に配置する必要があります。今回は、彼の位置が親div要素に対して相対的である場合です。

于 2012-11-06T20:45:17.493 に答える
0

相対的に配置された要素に負のマージンを追加してみてください。

.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
}
于 2012-11-06T20:45:04.400 に答える