Html 将一个div放置在另一个div下[使用display:flex时]

我有一张专辑封面，旁边有使用

display:flex

的曲目列表。这里的问题是，我想在艺术品下面添加一个

，而不会弄乱页面的整个布局，任何关于如何这样做的提示都将不胜感激

.container{
宽度：100%；
高度：自动；
框大小：边框框；
}
.记录{
填充顶部：80px；
显示器：flex；
弯曲方向：行；
框大小：边框框；
}
.记录img{
宽度：35%；
身高：35%；
边框：1px纯色灰色；
盒影：5px 5px 5px灰色；
}
.记录下#{
浮动：左；
左侧填充：90px；
}
.记录.文本{
位置：相对位置；
字体家族：幻想；
}
.记录。文本h2，
h3，
h4{
颜色：#6b；
}
.record.text h1{
字号：2.5em；
}
.记录.文本h2{
字号：1.15em；
垫底：15px；
}
.记录.文本h3{
字号：0.9em；
}
.记录.文本h4{
字号：0.8em；
}
桌子{
宽度：120%；
文本对齐：左对齐；
}
运输署{
字体家族：幻想；
字号：1.18em；
垫底：20px；
}
#脚注{
填充顶部：10px；
}
不
.持续时间{
字号：1em；
颜色：#262626；
}
@仅介质屏幕和（最小宽度：1440px）{
桌子{
宽度：180%；
}
}

好孩子，m.A.d.city
嘻哈/说唱。2012
1.
Sherane a.k.a Splinter大师的女儿
4:33
2.
婊子，别杀了我
5:10
3.
后座自由泳
3:32
4.
同侪压力的艺术
5:24
5.
金钱树（壮举，杰伊·洛克）
6:26
6.
诗意的正义（壮举，德雷克）
5:00
7.
好孩子
3:34
8.
城市医学硕士（壮举）
5:50
9
游泳池（已饮用）[扩展版]
5:13
10
唱我吧，我渴死了
12:03
11
真的（安娜·怀斯的壮举）
7:23
12
康普顿（德雷博士功绩）
4:08
12首歌，1小时8分钟
&抄袭；2012年后果/内部记录

您可以使用另一个容器包装您的

img

元素和

p

元素，以便将其视为

元素下
#的柔性项

<div class="example-container">
  <img src="images/goodkid.jpg" alt="artwork of the album Good Kid, M.A.A.D City">
  <p>Some Paragraph Element</p>
</div>


某些段落元素

您可以使用另一个容器包装您的
img
元素和
p
元素，以便将其视为
元素下
#的柔性项

<div class="example-container">
  <img src="images/goodkid.jpg" alt="artwork of the album Good Kid, M.A.A.D City">
  <p>Some Paragraph Element</p>
</div>


某些段落元素

<代码> >代码>里面有<代码> <代码>，你希望你的<代码>  <代码>文本在图像下面，让我们看看你的结构：

下面有
和
，由flex-direction行的逻辑分隔

因此…如果您不想改变页面的结构（即左区域和右区域），只需为
和附带的
创建一个父元素，例如：

…以便
保持在
文本上方

试试看，让我们知道进展如何

欢呼< /p> < p>元素<代码> <代码>里面有<代码> <代码>，你希望你的<代码>  <代码>文本就在图像下面，让我们看看你的结构：
下面有
和
，由flex-direction行的逻辑分隔

因此…如果您不想改变页面的结构（即左区域和右区域），只需为
和附带的
创建一个父元素，例如：

…以便
保持在
文本上方

试试看，让我们知道进展如何

干杯
用另一个容器包装img和段落。用另一个容器包装img和段落。@Capagris非常感谢！我就这么做了，添加了一些样式，就这样完成了。干杯，伙计。@Capagris非常感谢你！我就这么做了，添加了一些样式，就这样完成了。干杯，伙计。
display: flex;
flex-direction: column;