如何在HTML/CSS中创建列布局？关于我页面分列失效问题排查

分列失效原因 #

你为子元素.about-col设置了flex-basis: 48%的弹性盒属性，但承载两个列的父容器.row没有声明display: flex，弹性盒布局规则不会触发，两个.about-col默认还是独占整行的块级元素，因此会上下排列，出现文本显示在图片上方的效果。
代码验证工具仅能检测语法错误，这类逻辑缺失的样式规则不会被判定为错误，因此你排查时没有得到提示。

修复方法 #

在你的CSS代码中补充.row的样式规则即可：

.row {
  display: flex;
  /* 控制两个列左右对齐，中间留出空隙 */
  justify-content: space-between;
  /* 可选：控制两个列垂直居中对齐 */
  align-items: center;
  /* 可选：小屏幕宽度不足时自动换行，避免列被挤压变形 */
  flex-wrap: wrap;
}

如果需要适配移动端小屏显示，可以额外添加媒体查询规则，让小屏幕下两个列自动堆叠占满整行：

@media (max-width: 700px) {
  .about-col {
    flex-basis: 100%;
  }
}

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