使用 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">&nbsp; <div class="photo"><img src="demo.jpg"></div>&nbsp; <div class="title"><p>Lorem ipsum dolor sit amet,</p></div>&nbsp; <div class="meta"><p>Apr 7, 2020</p></div>&nbsp; <div class="content"><p>Lorem ipsum dolor sit amet, </p></div></div>在 .css 文件中，为 .container 类提供 flex 的显示。.container {&nbsp; display: flex}

Answer 3

你可以做类似的事情将“标题”、“元”、“内容”div 放入包装器内。所以“容器”里面会有两个div然后交给display: flex“容器”。你的代码看起来像&nbsp; <div class="container">&nbsp; &nbsp; &nbsp;<div class="photo"><img src="demo.jpg"></div>&nbsp; &nbsp; &nbsp;<div>&nbsp; &nbsp; &nbsp; &nbsp;<div class="title">Lorem ipsum dolor sit amet,</p></div>&nbsp; &nbsp; &nbsp; &nbsp;<div class="meta">Apr 7, 2020</p></div>&nbsp; &nbsp; &nbsp; &nbsp;<div class="content"><p>Lorem ipsum dolor sit amet, </p></div>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp;</div>