将标题、段落和图像放在一起

Question

我正在尝试将一些带有 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>

Answer 1

#box {
    display: flex;
    align-items: center;
    width: 950px;
}

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

<div>
  <h3>lorem ipsum</h3>
  <div id="box">
     <p>
       Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also use our npm template repo to quickly generate a Bootstrap project via npm.When you only need to include Bootstrap’s compiled CSS or JS, you can use jsDelivr. See it in action with our simple quick start, or browse the examples to jumpstart your next project. You can also choose to include Popper and our JS separately.
      </p>
        
      <img width="300" src="https://blog-media.byjusfutureschool.com/bfs-blog/2022/08/18080659/Article-Page-61.png" />
  </div>
               
</div>

Answer 2

您可以将

display: flex

添加到您要排列的两个元素的父级（此处：文本和图像）。

如果你愿意，你也可以在盒子上使用

display: flex

，但是如果你这样做，你必须考虑到里面的所有元素都会受到flex布局的影响。您可以使用

flex-direction: row

或

flex-direction: column

创建水平或垂直堆栈。

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

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

.box__body {
  display: flex;
}

<div id="box">
  <h3 class="box__title">lorem ipsum</h3>
  <div class="box__body">
    <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>
</div>