CSS布局求助：实现h3标题+文本块与图片并排且h3居文本顶部

目前使用Flex布局实现了图片与文本的并排，但<h3>标题和<p>内容处于同一水平行，无法让标题位于文本内容的顶部，期望效果是标题在文本块上方，整体文本区域与图片横向排列。

原有代码 #

CSS #

#box {
    display: flex;
    align-items: center;
    width: 950px;
    margin:auto;
    margin-top: 30px;
}

#box p {
    margin-right: 1em;
}

HTML #

<div id="box">
    <h3>lorem ipsum</h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </p>

    <img width="300" src="https://blog-media.byjusfutureschool.com/bfs-blog/2022/08/18080659/Article-Page-61.png" />
</div>

解决方案 #

核心问题是当前Flex容器直接把<h3>、<p>、<img>作为同级元素排列，需要把<h3>和<p>包裹在一个子容器里，让这个子容器和图片成为Flex的两个子项，同时子容器内部垂直排列。

修改后的代码 #

CSS

#box {
    display: flex;
    width: 950px;
    margin: 30px auto;
    gap: 1em; /* 替代margin-right，更灵活的间距控制 */
}

/* 文本容器，内部垂直排列 */
.text-content {
    display: flex;
    flex-direction: column;
}

#box p {
    margin: 0; /* 清除默认margin，避免多余间距 */
}

HTML

<div id="box">
    <div class="text-content">
        <h3>lorem ipsum</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </p>
    </div>
    <img width="300" src="https://blog-media.byjusfutureschool.com/bfs-blog/2022/08/18080659/Article-Page-61.png" />
</div>

说明 #

1. 新增.text-content容器包裹<h3>和<p>，设置flex-direction: column让内部元素垂直排列，标题自然位于文本上方。
2. 移除原align-items: center，避免所有Flex子项垂直居中，文本容器和图片默认沿顶部对齐，符合预期布局。
3. 使用gap替代margin-right，更统一地控制文本容器与图片之间的间距。

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