仅用CSS实现评论文本遇头像时下移而非侧移的解决方法

针对评论内容被头像挤压、无法撑满宽度的问题，仅用CSS就能实现适配多端的排版修复，以下是几种可行方案：

方案1：网格布局（Grid） #

通过网格明确划分区域，让评论内容强制占满整行：

.comment-body {
  display: grid;
  grid-template-columns: auto 1fr; /* 头像列自适应宽度，内容列占满剩余空间 */
  grid-template-areas: 
    "info info"
    "author date"
    "content content"; /* 评论内容跨两列 */
}

.comment-info {
  grid-area: info;
}

.comment-author {
  grid-area: author;
  margin-right: 1rem; /* 头像与其他区域留间距 */
}

.comment-date {
  grid-area: date;
  align-self: center; /* 日期与头像垂直居中对齐 */
}

.comment-content {
  grid-area: content;
  margin-top: 0.5rem; /* 与上方信息区留间距 */
}

该方案能让内容区自动撑满宽度，同时适配PC、移动端，屏幕缩窄时布局会自然调整。

方案2：浮动+BFC清除 #

兼容性更强的传统方案，通过清除浮动强制内容换行：

.comment-author {
  float: left;
  margin-right: 1rem;
}

.comment-date {
  overflow: hidden; /* 触发BFC，避免被浮动元素覆盖 */
  padding-top: 0.2rem; /* 微调垂直对齐 */
}

.comment-content {
  clear: both; /* 清除浮动，强制换行占满整行 */
  margin-top: 0.5rem;
}

支持所有现代及旧版浏览器，确保内容不会被头像挤压侧移。

方案3：Flex布局 #

简洁灵活的布局方式，通过宽度控制实现内容撑满：

.comment-body {
  display: flex;
  flex-wrap: wrap;
}

.comment-info {
  width: 100%; /* 信息区占满整行 */
}

.comment-author {
  margin-right: 1rem;
}

.comment-date {
  align-self: center;
}

.comment-content {
  width: 100%; /* 内容区强制占满整行 */
  margin-top: 0.5rem;
}

Flex布局能轻松控制元素对齐，适配多端的同时保持代码简洁。

以上方案均无需修改HTML结构，任选一种即可实现文本撑满宽度、遇相邻元素自动下移的效果。

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