效果截图如下

实现代码如下

<style>
.comment-row {
        display: flex;
        flex-wrap: wrap;  
        justify-content: flex-start;  
        margin-bottom: 10px;  /* 添加这行代码实现上下行间隔 10px，您可以根据需求调整数值 */
    }
.recent-comment img:hover {
        opacity: 1;
    }
.recent-comment img {
    opacity: 0.8;
    transition: opacity 0.3s ease;
    margin-right: 8px;
    margin-bottom: 8px;
    border-radius: 0;
    }
</style>
<?php
$this->widget('Widget_Comments_Recent', 'pageSize=518')->to($comments);
echo '<div class="comment-row">';
while ($comments->next()) {
    echo '<div class="recent-comment">';
    $randomNumber = rand(1, 526);
    echo '<a href="'. $comments->permalink. '" target="_blank" title="'. $comments->text. '"><img src="https://www.jian27.com/img/avatar/'. $randomNumber. '.png" width="25" height="25" alt="'. $comments->text. '" /></a>';
    echo '</div>';
}
echo '</div>';
?>

演示地址

https://www.jian27.com/html/guestbook.html

头像图片地址你们要自己修改成自己的地址。否则用不了