将文本从图像的一侧移动到下面的图像

Question

我想在保留时移动帖子缩略图下的帖子标题。这似乎是一件相当容易的事情，但我无法弄清楚正确的编码。如果有人能提供帮助，我会非常感激。

它的样子的图像（我希望图片缩略图下方的帖子标题）

相关-posts.php

<div class="related-posts">
<?php $orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 3, // Number of related posts that will be shown.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related-posts"><h3 class="related-posts-title">Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><span class="related-posts-image"><?php the_post_thumbnail(); ?></span></a></div>
<div class="relatedcontent">
<h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
</div>


<?
}
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>
</div>

CSS

.related-posts-title {
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
}
.related-posts-image img {
        height:259px;
    width:400px;

}
.relatedthumb {
    display: inline-block;
}
.relatedcontent {
display: inline-block;
}

Answer 1

我会将图像和标题一起包装在div中，并将内嵌样式仅应用于外部div。

Answer 2

如果将图像设置为块元素，则应占用页面的其余部分并移动其下方的文本。然后只需使用填充和边距将其移动到您想要的位置。