Flask项目中如何实现文章左侧头像与内容横向并排显示而非纵向堆叠

云原生阿岚

2026-4-29

搞定Flask文章列表头像与内容横向排列的问题

嘿，我知道你现在跟着Flask教程开发，想让每篇文章旁的头像和内容横向并排，但现在却纵向堆叠了——这问题其实很容易解决，咱们一步步来：

快速修复：给文章容器加个Bootstrap类

你用了Bootstrap的.media组件，但它需要flex布局的支持才能让内部元素横向排列。最简单的办法就是给你的article标签里的.content-section加上d-flex类，这是Bootstrap预定义的flex容器类，直接用就行：

<article class="media content-section d-flex">
 <img class="rounded-circle article-img" src="https://via.placeholder.com/80">
 <div class="media-body">
 <div class="article-metadata">
 <a class="mr-2" href="#">{{ post.author.username }}</a>
 <small class="text-muted">{{ post.date_posted.strftime('%Y-%m-%d') }}</small>
 </div>
 <h2><a class="article-title" href="{{ url_for('post', post_id=post.id) }}">{{ post.title }}</a></h2>
 <p class="article-content">{{ post.content }}</p>
 </div>
</article>

为啥会堆在一起？

Bootstrap 4的.media类本来默认是display: flex的，但你的自定义.content-section样式里没设置flex相关属性，导致内部的头像和内容区块变成了块级元素，自然就上下堆起来了。加个d-flex就能让容器恢复flex布局，元素就会横向排列了。

另一种办法：直接改自定义CSS

如果你不想用Bootstrap的预定义类，也可以自己修改你的CSS，给.content-section加上flex属性：

.content-section {
 background: #ffffff;
 padding: 10px 20px;
 border: 1px solid #dddddd;
 border-radius: 3px;
 margin-bottom: 20px;
 display: flex; /* 新增：让容器变成flex布局 */
 align-items: flex-start; /* 可选：让内容和头像顶部对齐，更美观 */
}

这样改完，不用动HTML代码，也能实现头像和内容横向并排的效果，而且能保留你原来的所有样式。