我想将帖子标题移动到帖子缩略图下，同时将所有3篇帖子保持在同一行。这似乎是一件相当容易的事情，但我无法找出正确的编码。如果有人能帮忙，我会非常感激。
它看起来像什么样的图像（我想在图像缩略图下方显示文章标题）
相关职位。php
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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;
}
最合适的回答,由SO网友:startToday 整理而成
您的问题不是WP特定的，但要实现所需的布局，只需更改.relatedcontent 样式设置为：
.relatedcontent {
display: block;
}
SO网友:Matteo Manzini
你需要扭曲.relatedthumb 和.relatedcontent 内部ali 容器并将其浮起，然后移除display: inline-block; 来自两个班级。
html：
<li>
<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>
</li>
css：
ul {
display: inline;
}
ul li {
float: left;
list-style: none;
padding: 0 2px;
}
.relatedthumb {
display: block;
}
.relatedcontent {
display: block;
}
此处演示：
https://jsfiddle.net/MatteoMnz/ndq8d2ud/
