Question

我正在尝试移动图片内部的标题。我创建了一个div，但它没有正确显示。然后我删除。我改为现有div的代码。

但请显示。我尝试过margin-top但不行。

CSS

  .lazy-enabled #main-content .first-news img {
    height: 310px;
}

.lazy-enabled #main-content .first-news .tie-appear.post-thumbnail a{
    background-color: red !important;
    display: table-cell;
    font-size: 25px;
    color: white;
}

Div PHP

<div id="baslist">


                        <div class="post-thumbnail">
                            <a href="<?php the_permalink(); ?>" rel="bookmark">
                                <?php the_post_thumbnail( 'tie-medium' ); ?>
                                <span class="fa overlay-icon"></span>
                            </a>


                    <h2 class="post-box-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
                        </div><!-- post-thumbnail /-->
                    <?php endif; ?>

                        </div>



.lazy-enabled #main-content .first-news .tie-appear.post-thumbnail a{
    background-color: red !important;
    display: table-cell;
}

Answer 1

您需要缩略图包装为position: relative，标题为position: absolute。然后你可以把它放在包装器的底部并添加你需要的任何边距。

.post-thumbnail {
  position: relative;
}
.post-thumbnail .post-box-title {
  position: absolute;
  bottom: 0;
  margin: 20px;
}
.post-thumbnail .post-box-title a {
    background-color: red !important;
    display: table-cell;
    font-size: 25px;
    color: white;
}

<div id="baslist">
  <div class="post-thumbnail">
    <a href="#" rel="bookmark">
        <span class="fa overlay-icon"></span>
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">
    </a>
    <h2 class="post-box-title"><a href="#" rel="bookmark">Post Title</a></h2>
  </div>
</div>

Answer 2

使用position: absolute将其定位在相对定位的div的顶部

如何在DIV中显示标题？

2 个答案: