我想将（标题、元和内容）放在照片 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>
3 回答
桃花长相依
TA贡献1860条经验 获得超8个赞
将容器 css 设置为类似以下内容：
<style>
.container{
display:flex;
flex-direction: column;
}
</style>
青春有我
TA贡献1784条经验 获得超8个赞
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
}
慕的地10843
TA贡献1785条经验 获得超8个赞
你可以做类似的事情
将“标题”、“元”、“内容”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>
- 3 回答
- 0 关注
- 63 浏览
添加回答
举报
0/150
提交
取消