如何实现类似软文的图文并列div布局？flex模板样式不符该如何调整

首先明确结论：使用columns或column-span相关CSS属性不是最优方案，这类属性主要用于实现文本内容的多列流式排版，你要实现的固定图文并排效果，直接用Flex布局即可，也匹配你当前用Flex做行展示的技术选型。

你不需要调整现有HTML标签结构，只要添加以下CSS规则即可实现目标效果：

1. 给父容器article开启Flex布局，控制图文对齐方式和间距：

.col-lg-3 {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

2. 按需调整图片展示样式，示例中是圆形头像，你可以根据需求修改尺寸：

.img img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
}

3. 清除p标签默认外边距，优化文字排版：

.col-lg-3 p {
  margin: 0;
  line-height: 1.5;
}

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