PHP搜索结果页图片缩放并与标题同行显示方案咨询

这里提供两种常用的实现方式，都能完成缩小图片并让标题显示在图片旁的需求：

方案一：Flexbox布局（推荐，现代浏览器兼容性好） #

Flexbox是最直观的布局方式，能轻松实现横向排列和对齐：

1. 给外层容器添加display: flex，同时设置对齐方式、间距和内边距优化排版；
2. 给文章缩略图设置固定宽度（或百分比）缩小图片，也可通过the_post_thumbnail的参数指定WordPress预设尺寸；
3. 让标题所在的内容区域自动填充剩余空间，同时设置垂直对齐保证视觉协调。

修改后的代码：

<?php
while ( $query->have_posts() ) {
    $query->the_post();
    ?>
    <div style="background-color:#ffffff; display: flex; align-items: center; gap: 20px; padding: 15px; margin-bottom: 10px;">
            
        <?php 
        // 使用预设小尺寸缩略图，或自定义宽度控制大小
        the_post_thumbnail('thumbnail', ['style' => 'width: 120px; height: auto;']); 
        ?>
    
        <div style="flex: 1;">
            <h2 style="font-size:24px; margin: 0;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <span><small><?php the_tags(); ?><br><?php the_date(); ?></small></span>
        </div>
        
    </div>
<?php }
wp_reset_postdata(); // 重置查询上下文，避免影响后续WordPress函数调用 ?>

方案二：Float布局（兼容旧浏览器） #

如果需要适配较老的浏览器，可以采用浮动布局：

1. 给图片添加float: left和固定宽度，设置右侧间距拉开与标题的距离；
2. 给内容区域添加overflow: hidden触发BFC，避免文字环绕异常；
3. 外层容器添加overflow: auto清除浮动，防止容器高度塌陷。

修改后的代码：

<?php
while ( $query->have_posts() ) {
    $query->the_post();
    ?>
    <div style="background-color:#ffffff; overflow: auto; padding: 15px; margin-bottom: 10px;">
            
        <?php 
        the_post_thumbnail('thumbnail', ['style' => 'width: 120px; height: auto; float: left; margin-right: 20px;']); 
        ?>
    
        <div style="overflow: hidden;">
            <h2 style="font-size:24px; margin: 0;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <span><small><?php the_tags(); ?><br><?php the_date(); ?></small></span>
        </div>
        
    </div>
<?php }
wp_reset_postdata(); ?>

补充说明 #

• the_post_thumbnail('thumbnail')中的thumbnail是WordPress默认小尺寸缩略图，你也可以替换为medium、large，或者在后台「设置-媒体」自定义尺寸；
• 代码里的间距值（gap或margin-right）可根据需求调整，让排版更符合你的设计；
• 务必保留wp_reset_postdata()，避免后续WordPress函数调用出现上下文错误。

内容的提问来源于stack exchange，提问作者Anthony Gioeli