将文本从图像一侧移动到图像下方答案

【问题标题】：Move text from side of image to below image将文本从图像一侧移动到图像下方
【发布时间】：2023-03-21 08:25:01
【问题描述】：

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

它的样子（我想要图片缩略图下方的帖子标题）

related-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;
}

【问题讨论】：

标签： html css wordpress image

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：