如何在页眉中将文本对齐到图片右侧（解决文本下移问题）

我尝试将正文文本放置在附图中红色方框标注的区域（图片右侧），但无论怎么调整，文本始终向下偏移。

相关代码 #

<div class="catalog-center-width one-col-full">
  <div class="top-row-grey top-row-white-v2 padding-top padding-side row-v2">
    <div class="row dp-row-flex-v2">
      <div class="columns large-6 text-center dp-promo-image-wrapper"><img src="https://everpath-course-content.s3-accelerate.amazonaws.com/instructor%2F3vkvwjz9hnng2dhlfwzj2a5lt%2Fpublic%2F1666809704%2F6527-q2retarget-hc.1666809704408.png" alt="" width="529" height="360" align="left" /></div>
      <h1 class="break-word">
        <strong>Get started with Ally Lending basics</strong>
      </h1>
      <div class="sj-course-info-wrapper">
        <h2>Find and start conversations, collaborate effectively in channels, find information you need, keep work organized with channels and keep your sidebar organized in Slack.</h2>
        <div id="purchase-button-wrapper-large" class="purchase-button-wrapper">
          <a class="medium button purchase-button login-link free" href="/checkout/1ycnoni7kt1cn">
            <span class="purchase-button-full-text">&nbsp;Get Started </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="purchase-button-wrapper-large" class="purchase-button-wrapper">
  <div id="purchase-button-wrapper-large" class="purchase-button-wrapper">
    <!-- START Walkthrough developer center tile design,
          add to page source code -->
  </div>
</div>

问题核心是flex容器的子元素结构错误：当前dp-row-flex-v2作为flex容器，内部的图片容器、h1、sj-course-info-wrapper是独立的flex子元素，默认会横向依次排列，但h1和文本容器是块级元素，会占据整行宽度，导致被挤到图片下方。

修复步骤 #

1. 调整HTML结构：把右侧的h1和sj-course-info-wrapper放到同一个容器内，让这个容器和图片容器成为flex容器的两个平级子项：

<div class="catalog-center-width one-col-full">
  <div class="top-row-grey top-row-white-v2 padding-top padding-side row-v2">
    <div class="row dp-row-flex-v2">
      <!-- 左侧图片容器 -->
      <div class="columns large-6 text-center dp-promo-image-wrapper">
        <img src="https://everpath-course-content.s3-accelerate.amazonaws.com/instructor%2F3vkvwjz9hnng2dhlfwzj2a5lt%2Fpublic%2F1666809704%2F6527-q2retarget-hc.1666809704408.png" alt="" width="529" height="360" align="left" />
      </div>
      <!-- 右侧内容容器，与图片容器平级 -->
      <div class="columns large-6 dp-text-wrapper">
        <h1 class="break-word">
          <strong>Get started with Ally Lending basics</strong>
        </h1>
        <div class="sj-course-info-wrapper">
          <h2>Find and start conversations, collaborate effectively in channels, find information you need, keep work organized with channels and keep your sidebar organized in Slack.</h2>
          <div id="purchase-button-wrapper-large" class="purchase-button-wrapper">
            <a class="medium button purchase-button login-link free" href="/checkout/1ycnoni7kt1cn">
              <span class="purchase-button-full-text">&nbsp;Get Started </span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="purchase-button-wrapper-large" class="purchase-button-wrapper">
  <div id="purchase-button-wrapper-large" class="purchase-button-wrapper">
    <!-- START Walkthrough developer center tile design,
          add to page source code -->
  </div>
</div>

2. 补充CSS（若框架未自动处理）：

.dp-row-flex-v2 {
  display: flex;
  align-items: flex-start; /* 让左右内容顶部对齐，避免偏移 */
  gap: 2rem; /* 可选：设置左右容器的间距 */
}

.dp-text-wrapper {
  padding: 1rem 0; /* 可选：调整内边距匹配布局 */
}

关键说明 #

• 用columns large-6给右侧容器设置和图片容器相同的宽度比例，契合你使用的网格框架逻辑。
• align-items: flex-start确保左右容器的内容从顶部对齐，避免默认的stretch属性导致的布局偏移。

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