使用 flex 将一个 div 放置在另一个 div 下面

Question

我想将（标题、元和内容）放在照片 div 旁边。使用显示柔性例子<div class="container">  <div class="photo"><img src="demo.jpg"></div>  <div class="title">Lorem ipsum dolor sit amet,</p></div>  <div class="meta">Apr 7, 2020</p></div>  <div class="content"><p>Lorem ipsum dolor sit amet, </p></div></div>

Answer 1

将容器 css 设置为类似以下内容：

<style>

    .container{

        display:flex;

        flex-direction: column;

    }

</style>

Answer 2

Flexbox是通过简单地给父元素赋予flex的显示来实现的。在你的例子中，父元素是带有容器类的div。

<div class="container">

  <div class="photo"><img src="demo.jpg"></div>

  <div class="title"><p>Lorem ipsum dolor sit amet,</p></div>

  <div class="meta"><p>Apr 7, 2020</p></div>

  <div class="content"><p>Lorem ipsum dolor sit amet, </p></div>

</div>

在 .css 文件中，为 .container 类提供 flex 的显示。

.container {

  display: flex

}

Answer 3

你可以做类似的事情

• 将“标题”、“元”、“内容”div 放入包装器内。

• 所以“容器”里面会有两个div

• 然后交给display: flex“容器”。

你的代码看起来像

  <div class="container">

     <div class="photo"><img src="demo.jpg"></div>

     <div>

       <div class="title">Lorem ipsum dolor sit amet,</p></div>

       <div class="meta">Apr 7, 2020</p></div>

       <div class="content"><p>Lorem ipsum dolor sit amet, </p></div>

     </div>

   </div>