评论项必须用 display: flex 而不是 float，因 float 会导致父容器塌陷、嵌套错位及响应式失效；应设评论容器为 flex，头像固定尺寸+onerror兜底，主体用 flex:1，禁用 vertical-align，嵌套缩进用 ms-*，容器必加 flex-wrap: wrap 和 gap，并在 html 层用 width/height 和 onerror 兜底图片加载失败。

评论项必须用 display: flex 而不是 float

float 会让头像脱离文档流，导致父容器高度塌陷、嵌套回复错位、响应式失效。现代项目里还用 float 做评论行内对齐，基本等于主动放弃可维护性。

正确做法是把每条评论（<li> 或 <div class="comment">）设为 flex 容器：<ul> <li> <code>display: flex + align-items: flex-start 保证头像顶部对齐，避免文字换行后头像下移

头像用固定尺寸（如 width: 40px; height: 40px;），加 onerror 事件兜底防止加载失败拉伸布局

评论主体区域用 flex: 1 占满剩余空间，不写死宽度，防长用户名撑破容器

禁止给头像加 vertical-align: middle ——它和 align-items 冲突，会引发视觉偏移

嵌套回复靠 ms-* 缩进，别手写 margin-left

用 margin-left: 40px 这类硬编码值，在小屏上极易挤出横向滚动条，或让三级回复缩进过深看不见。

推荐用 CSS Logical Properties 的 ms-* 类（如 Bootstrap 提供的）：

• 一级评论：默认无缩进（ms-0）
• 二级回复：加 ms-4（约 margin-inline-start: 1.5rem）
• 三级回复：用 ms-5（约 2rem）
• 超过三级：改用 ms-lg-5，小屏自动回落为 ms-0，避免移动端错位

这样缩进值基于 rem，能随用户字体设置、深色模式、横屏等场景自适应，比像素值可靠得多。

flex-wrap: wrap 不是可选项，是评论列表的保命线

很多人只写 display: flex 就以为完事了，结果在手机上所有评论强行横排、文字折行错乱、甚至出现横向滚动条——根本原因是 Flex 默认 flex-wrap: nowrap。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

评论列表容器（比如 <ul class="comments"></ul>）必须显式声明：

• flex-wrap: wrap：允许换行，让单条评论自然堆叠
• 搭配 gap: 16px 控制行/列间距，比用 margin 更干净（不用处理首尾外边距）
• 若需兼容 iOS 14.5 以下 Safari，可用 margin-bottom 替代 gap，但要配合清除最后一行子项的 margin-bottom

没加 flex-wrap: wrap 的评论容器，在窄屏下不是“变小”，而是“崩溃”。

图片加载失败时，HTML 层面必须兜底

头像挂掉后浏览器显示破损图标，宽高不定，会拉伸整个 flex 行，造成评论流抖动。这不是样式问题，是 HTML 没兜底。

必须同时做两件事：

• HTML 中给 <img> 加 width 和 height 属性（如 width="40" style="max-width:90%"），锁定固有尺寸
• 加上 onerror="this.src='fallback-avatar.svg'"，确保加载失败时仍保持尺寸和布局节奏

只靠 CSS 设置 max-width 或 object-fit 无法阻止破损图标带来的 DOM 尺寸波动，兜底必须落在 HTML 层。