无法实现预期文本显示效果：代码排版与布局调整问询

嘿，这两个布局问题用Flexbox就能轻松搞定，我给你一步步拆解解决方案：

1. 实现图片左对齐+右侧文本上下排列的布局 #

你之前用<br>导致文本跑到图片下方，是因为普通流里的换行元素会把整个内容块往下推。换成Flex布局就能精准控制元素位置：

• 给所有元素套一个父容器，用display: flex让图片和文本横向排列；
• 右侧的文本单独放一个子容器，用flex-direction: column让链接和徽章垂直堆叠；
• 图片设置height: 100%+object-fit: cover保证满高且比例正常。

直接给你可复用的PHP代码：

<!-- 父容器：控制整体横向布局 -->
<div style="display: flex; align-items: flex-start; gap: 12px;">
    <!-- 你的图片标签，确保满高显示 -->
    <img src="你的图片URL" style="height: 100%; object-fit: cover;" alt="图片描述">
    
    <!-- 右侧文本容器：垂直排列内部元素 -->
    <div style="display: flex; flex-direction: column;">
        <?php echo '<b><a href="https://####/reactie">你的链接文本</a></b>'; ?>
        <?php echo '<span class="badge bg-red">Denied</span>'; ?>
    </div>
</div>

这样不管内容多少，图片始终左对齐，链接和徽章都会乖乖待在图片右侧，垂直排列不会错位。

2. 在链接下方添加细线条 #

有两种简洁的实现方式：

方式1：内联样式快速实现

直接给链接的父元素（<b>标签）加底部边框：

<?php echo '<b style="border-bottom: 1px solid #ccc; padding-bottom: 4px; display: inline-block;"><a href="https://####/reactie">你的链接文本</a></b>'; ?>

display: inline-block是为了让边框只包裹链接文本，不会撑满整个容器。

方式2：CSS类（更易维护）

如果项目有外部样式表，建议定义一个可复用的类：

.link-with-divider {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 4px;
    display: inline-block;
    margin-bottom: 6px; /* 和下方的Denied徽章留点间距 */
}

然后PHP代码里调用这个类：

<?php echo '<b class="link-with-divider"><a href="https://####/reactie">你的链接文本</a></b>'; ?>

把这两个方案结合起来，就能完美实现你要的效果啦！

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