CSS问题：图片右侧text-container显示为行而非列的解决求助

问题根源 #

文本容器内元素横向排列，本质是Flex布局的默认方向为row（横向），而你需要的是column（纵向）排列；也可能是容器未明确设置布局规则，导致继承了父元素的横向排列属性。

修复步骤 #

1. 强制文本容器纵向排列 #

找到.text-container的CSS规则，添加flex-direction: column，同时确保容器启用Flex布局：

.text-container {
  display: flex;
  flex-direction: column; /* 核心：让子元素纵向堆叠 */
  gap: 12px; /* 可选：添加元素间的纵向间距，提升排版美观度 */
}

2. 删除多余按钮 #

直接在HTML代码中移除第二个按钮的标签即可，比如删除类似<button>多余按钮</button>的代码行。

3. 排查继承干扰 #

如果设置后仍未生效，检查父级容器（比如包裹图片和文本的外层容器）是否设置了flex-direction: row且未限制子元素的布局方向。此时只需确保.text-container的flex-direction规则优先级足够（直接写在该类的CSS中即可）。

完整示例代码 #

假设你的基础结构如下，调整后即可达到预期效果：

<!-- HTML结构 -->
<div class="content-wrapper">
  <img src="your-image-path.jpg" alt="展示图片">
  <div class="text-container">
    <h2>标题内容</h2>
    <p>这里是文本描述，需要纵向排列在标题下方</p>
    <button>保留的按钮</button>
    <!-- 已移除第二个按钮 -->
  </div>
</div>

/* CSS样式 */
.content-wrapper {
  display: flex; /* 实现图片与文本容器并排 */
  align-items: flex-start; /* 让图片和文本容器顶部对齐 */
  gap: 20px; /* 图片与文本容器的间距 */
}

.text-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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