Css Div出现在父元素'；这是填充物，不是外面

我已经构建了一个三列flexbox布局，第一列包含一个带有标题的图像。出于某种原因，此标题（

.photo caption

）显示在其父元素（

.card cont

）的填充中，而不是在其下方。如何设置此标题的样式，使其按预期向下推

布局示例：

<div class="card-cont">
  <h2>Symphonic masters 1 Subscription</h2>
  <div class="card">
    <div class="card-img">
      <a href="#"><img src="https://img.buzzfeed.com/buzzfeed-static/static/2014-05/enhanced/webdr06/14/7/enhanced-21657-1400066093-5.jpg" /></a>
      <div class="photo-caption">
        Photo by Humberto Howard
      </div>
    </div>
    <div class="card-info">
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
      </p>
    </div>
    <div class="card-links">
      <div class="button-cont">
        <a class="button blue-button" href="#">Subscribe</a>
      </div>
    </div>
  </div>
</div>

---

工作演示：。

您已经定义了硬高度，以防止这些元素在DOM中自然流动。从

section.events-wide.card cont.card

和

section.events-wide.card cont.card img a

删除高度会使它们具有自然高度，不会将内容溢出到父元素的填充中

section.events-wide标题{
填充：15px0；
}
第1节宽标题h1{
字号：2.5em；
线高：1；
}
第节事件范围卡续{
填充：30px0；
}
第.events-wide.card cont>h2节{
垫底：15px；
字号：1.75em；
}
节.事件范围.卡续卡{
显示器：flex；
/*高度：295px*/
背景颜色：灰色；
}
section.events-wide.card cont.card.card buy按钮，
第.events-wide.card cont.card img节，
节。事件范围。卡控制卡。卡信息，
第.events-wide.card cont.card.card了解更多信息，
section.events-wide.card cont.card.card链接{
弹性基准：33.3%；
}
第.events-wide.card cont.card img a节{
显示：内联块；
/*身高：100%*/
宽度：100%；
}
第.events-wide.card cont.card img a img节{
对象匹配：覆盖；
身高：100%；
宽度：100%；
}
节。事件范围。卡控制卡。卡信息，
第.events-wide.card cont.card.card了解更多信息，
section.events-wide.card cont.card.card链接{
填充：30px2%；
}
节事件范围卡续卡信息p a，
节。事件范围。卡片继续。卡片了解更多p a，
section.events-wide.card cont.card.card links p a{
字体大小：1.1米；
}
section.events-wide.card cont.card.card info{
文本对齐：左对齐；
}
第.events-wide.card cont.card.card info h1节，
section.events-wide.卡片内容卡片信息h2{
显示：块；
flex-flow：行nowrap；
填充：5px0；
线高：1.2；
}
section.events-wide.卡片内容卡片信息h1{
字号：1.5em；
}
section.events-wide.卡片内容卡片信息h2{
字体大小：1.1米；
}
section.events-wide.card cont.card.card buy按钮按钮cont，
section.events-wide.card cont.card.card links.button cont{
填充底部：30px；
}
section.events-wide.卡控制卡购买按钮按钮控制按钮，
section.events-wide.card cont.card.card links.button cont.button{
显示：内联块；
填充：10px 60px；
字体大小：1.2米；
}
.events-wide.events-wide-alt.card cont:非（：最后一个子项）{
边框底部：1px纯色灰色；
}
.events-wide.events-wide-alt.card cont.card{
背景色：透明；
}
.events-wide.events-wide-alt.card cont.card>div{
填充：0；
}
.events-wide.events-wide-alt.card cont.card>div:not（：最后一个子项）{
右：2%；
}
.events-wide.events-wide-alt.card cont.card>div.photo标题{
显示：块；
高度：15px；
字体大小：.65em；
}
.events-wide.events-wide-alt.card cont.card>div p{
字体大小：1.1米；
}
.events-wide.events-wide-alt.card cont.card>div.按钮{
宽度：100%；
}

交响乐大师1
亨伯托·霍华德摄

例如，在欧盟的适应范围内，我们有一个共同的目标。例如，在欧盟的适应范围内，我们有一个共同的目标。

交响乐大师1
亨伯托·霍华德摄

例如，在欧盟的适应范围内，我们有一个共同的目标。例如，在欧盟的适应范围内，我们有一个共同的目标。

交响乐大师1
亨伯托·霍华德摄

例如，在欧盟的适应范围内，我们有一个共同的目标。例如，在欧盟的适应范围内，我们有一个共同的目标。

我明白了。我需要这些高度来保持图像的纵横比为4:3。你能想出解决这个问题的办法吗？没关系，我找到了一个解决方案，在JS中动态设置

img

高度。谢谢@马里奥帕拉真好！NP

section.events-wide .card-cont {
  padding: 30px 0;
}
section.events-wide .card-cont > h2 {
  padding-bottom: 15px;
  font-size: 1.75em;
}
section.events-wide .card-cont .card {
  display: flex;
  height: 295px;
  background-color: grey;
}
section.events-wide .card-cont .card .card-buy-button,
section.events-wide .card-cont .card .card-img,
section.events-wide .card-cont .card .card-info,
section.events-wide .card-cont .card .card-learn-more,
section.events-wide .card-cont .card .card-links {
  flex-basis: 33.3%;
}
section.events-wide .card-cont .card .card-img a {
  display: inline-block;
  height: 100%;
  width: 100%;
}
section.events-wide .card-cont .card .card-img a img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
section.events-wide .card-cont .card .card-info,
section.events-wide .card-cont .card .card-learn-more,
section.events-wide .card-cont .card .card-links {
  padding: 30px 2%;
}
section.events-wide .card-cont .card .card-info p a,
section.events-wide .card-cont .card .card-learn-more p a,
section.events-wide .card-cont .card .card-links p a {
  font-size: 1.1em;
}
section.events-wide .card-cont .card .card-info {
  text-align: left;
}
section.events-wide .card-cont .card .card-info h1,
section.events-wide .card-cont .card .card-info h2 {
  display: block;
  flex-flow: row nowrap;
  padding: 5px 0;
  line-height: 1.2;
}
section.events-wide .card-cont .card .card-info h1 {
  font-size: 1.5em;
}
section.events-wide .card-cont .card .card-info h2 {
  font-size: 1.1em;
}
section.events-wide .card-cont .card .card-buy-button .button-cont,
section.events-wide .card-cont .card .card-links .button-cont {
  padding-bottom: 30px;
}
section.events-wide .card-cont .card .card-buy-button .button-cont .button,
section.events-wide .card-cont .card .card-links .button-cont .button {
  display: inline-block;
  padding: 10px 60px;
  font-size: 1.2em;
}