我正在try 将一些带有h3的文本作为标题,与图像平行 我设法获得了图像和文本,但问题是我无法将h3放在文本的顶部

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

#box p {
    margin-right: 1em;
}
            <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>

This is what i want it to essentialy look like with the h3 as title enter image description here

推荐答案

您只需将文本内容包装在一个附加的div中:

#box {
  display: flex;
  align-items: center;
  width: 950px;
  margin: auto;
  margin-top: 30px;
  text-align: center; /* center the inner text */
}

#box p {
  margin-right: 1em;
}
<div id="box">
  <div>
    <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>

Html相关问答推荐

为什么html复选框总是具有只读属性?

仅在加载视频时显示描述(<;Video>;标签)

如何收集<;p&>元素下的<;p>;子元素

MatSnackBar: colored颜色 不起作用

在R中从网页上的特定iframe中提取图形数据

禁用所有行,但在16角中单击编辑按钮的行除外

错误时交换表单,成功时使用HTMX重定向

如何在 Bootstrap 5 中将两个导航栏元素放在末尾?

为什么我的 html 对话框在 React 中没有渲染在我的内容之上?

用由文本制成的边框包围内容

一旦大于最大限制,JQuery 取消 Select 复选框

网页爬虫:使用时光机器进行数据采集

透明渐变凹矩形

SVG 调整大小而不是溢出

子 div 在父 div 中溢出

如何使用 CSS 使粘性元素固定在视口顶部

在 SQL 中合并 HTML 表中的单元格

我可以在标签元素中使用标题元素吗?

使用模板循环每行列出 3 个 bootstrap 卡

如何使用 :before 在 CSS 中为列表增加计数器