调整图像大小并使其显示在 php 搜索结果中的文本旁边

Question

我有一个查询结果页面，我想缩小图像并让标题出现在它旁边。有什么建议吗？

谢谢！

<?php
while ( $query->have_posts() ) {
    $query->the_post();

    ?>
    <div style=background-color:#ffffff;text-align:center>
            
        <?php the_post_thumbnail( );?>
    
            <h2 style="font-size:24px"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        
        
        <span><small><?php the_tags(); ?><br>
        <?php the_date(); ?></small></span>
        
    </div>

Answer 1

这更像是一个样式问题，而不是 PHP 问题。所以现在最好给你一个例子。
对于代码片段，我删除了 PHP 部分（变量）并将其替换为一些 HTML 元素以获得更好的体验并使代码片段正常工作。所以在这里你有一个 HTML 结构和关联的 CSS 来实现它并获得想法。

.wrapper {
    display: flex;
    align-items: top;
    column-gap: 10px;
    margin: 20px;
    border: 1px solid black;
    padding: 5px;
    width: 300px;
    background: #eaeaea;
}
        
.wrapper .thumb {
    width: 100px;
    height: 100px;

}
.wrapper .thumb img {
    width: 100%;
    height: auto;
}

.wrapper .info > .title {
    margin: 0;
    font-family: serif;
    font-weight: bold;
    font-size: 18px;
    color: black;
}
.wrapper .info > .tags,
.wrapper .info > .date {
    margin: 0;
    font-family: sans-serif;
    font-size: 14px;
    color: black;
}

<div class="wrapper">
  <div class="thumb">
    <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Nevin">
  </div>
  <div class="info">
    <h2 class="title">Some Title</h2>
    <p class="tags"><a href="#">#tag1</a> <a href="#">#tag2</a> <a href="#">#tag3</a></p>
    <p class="date">2023-05-05 00:00</p>
  </div>
</div>