Flexbox元素布局问题：实现图片与文本横向对齐

问题出在当前Hero-container和image-container是同级元素，且body设置了flex-direction: column，导致它们默认上下堆叠。要实现文本段落（上下排列）与图片横向对齐，只需调整结构和样式：

1. 调整HTML结构 #

新增一个父容器hero-content-wrapper，把文本容器和图片容器包裹进去：

<div class="header">
  <header class="Hero">Header Logo</header>
  <ol>
    <li><a href="www.reddit.com">Link One</a></li>
    <li><a href="www.reddit.com">Link Two</a></li>
    <li><a href="www.reddit.com">Link Three</a></li>
  </ol>
</div>
<!-- 新增的父容器 -->
<div class="hero-content-wrapper">
  <div class="Hero-container">
    <p class="intro-text">
      Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
    </p>
    <p class="secondary-text">Blah blah Blah</p>
  </div>
  <div class="image-container">
    <img src="https://via.placeholder.com/350x150" alt="Placeholder Image">
  </div>
</div>

2. 修改CSS样式 #

给父容器添加flex布局，同时调整子容器的样式：

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: black;
  padding: 0 20px; /* 可选，避免内容贴边 */
}

/* 新增的父容器样式 */
.hero-content-wrapper {
  display: flex;
  gap: 20px; /* 可选，给文本和图片添加间距 */
  align-items: flex-start; /* 让文本顶部与图片对齐 */
}

div.Hero-container {
  display: flex;
  flex-direction: column;
  flex: 1; /* 让文本容器占据剩余空间 */
}

p.intro-text {
  color: #f9faf8;
  font-weight: bold;
  font-size: 48px;
  margin: 0 0 10px 0; /* 调整段落间距 */
}

p.secondary-text {
  color: #e5e7eb;
  font-size: 18px;
  margin: 0;
}

img {
  width: 350px;
  height: 150px;
}

.image-container {
  padding: 10px 0;
}

/* 可选：优化header布局 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  padding: 10px 0;
  margin-bottom: 20px;
}

.header ol {
  display: flex;
  list-style: none;
  gap: 20px;
  margin: 0;
}

.header a {
  color: #e5e7eb;
  text-decoration: none;
}

修改后，两个段落会在左侧上下排列，图片在右侧与文本横向对齐，同时保持整体布局的合理性。

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