Разместите div под другим div [при использовании display: flex]

Question

У меня есть обложка альбома со списком треков рядом с ним, используя display: flex, проблема в том, что я хочу добавить <p> под обложку, не испортив весь макет страницы, любые советы, как это сделать был бы очень признателен.

.container {
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.record {
  padding-top: 80px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

.record img {
  width: 35%;
  height: 35%;
  border: 1px solid gray;
  box-shadow: 5px 5px 5px grey;
}

.record #under {
  float: left;
  padding-left: 90px;
}

.record .text {
  position: relative;
  font-family: fantasy;
}

.record .text h2,
h3,
h4 {
  color: #6b6b6b;
}

.record .text h1 {
  font-size: 2.5em;
}

.record .text h2 {
  font-size: 1.15em;
  padding-bottom: 15px;
}

.record .text h3 {
  font-size: 0.9em;
}

.record .text h4 {
  font-size: 0.8em;
}

table {
  width: 120%;
  text-align: left;
}

td {
  font-family: fantasy;
  font-size: 1.18em;
  padding-bottom: 20px;
}

#footnote {
  padding-top: 10px;
}

.no,
.duration {
  font-size: 1em;
  color: #262626;
}

@media only screen and (min-width: 1440px) {
  table {
    width: 180%;
  }
}

<div class="container">
  <div class="record">
    <img src="images/goodkid.jpg" alt="artwork of the album Good Kid, M.A.A.D City">

    <div id="under">
      <div class="text">
        <h1>good kid, m.A.A.d city</h1>
        <h2>Hip-Hop/Rap . 2012</h2>
      </div>

      <div class="tracklist">
        <table>
          <tr>
            <td class="no">1.</td>
            <td class="title">Sherane a.k.a Master Splinter's Daughter</td>
            <td><button class="btn"><i class="fa fa-bars"></i></button></td>
            <td class="duration">4:33</td>
          </tr>
          <tr>
            <td class="no">2.</td>
            <td class="title">Bitch, Don't Kill My Vibe</td>
            <td><button class="btn"><i class="fa fa-bars"></i></button></td>
            <td class="duration">5:10</td>
          </tr>
          <tr>
            <td class="no">3.</td>
            <td class="title">Backseat Freestyle</td>
            <td><button class="btn"><i class="fa fa-bars"></i></button></td>
            <td class="duration">3:32</td>
          </tr>
          <tr>
            <td class="no">4.</td>
            <td class="title">The Art of Peer Pressure</td>
            <td><button class="btn"><i class="fa fa-bars"></i></button></td>
            <td class="duration">5:24</td>
          </tr>
          <tr>
            <td class="no">5.</td>
            <td class="title">Money Trees (feat. Jay Rock)</td>
            <td><button class="btn"><i class="fa fa-bars"></i></button></td>
            <td class="duration">6:26</td>
          </tr>
          <tr>
            <td class="no">6.</td>
            <td class="title">Poetic Justice (feat. Drake)</td>
            <td><button class="btn"><i class="fa fa-bars"></i></button></td>
            <td class="duration">5:00</td>
          </tr>
          <tr>
            <td class="no">7.</td>
            <td class="title">Good Kid</td>
            <td><button class="btn"><i class="fa fa-bars"></i></button></td>
            <td class="duration">3:34</td>
          </tr>
          <tr>
            <td class="no">8.</td>
            <td class="title">M.A.A.D City (feat. MC Eiht)</td>
            <td><button class="btn"><i class="fa fa-bars"></i></button></td>
            <td class="duration">5:50</td>
          </tr>
          <tr>
            <td class="no">9.</td>
            <td class="title">Swimming Pools (Drank) [Extended Version]</td>
            <td><button class="btn"><i class="fa fa-bars"></i></button></td>
            <td class="duration">5:13</td>
          </tr>
          <tr>
            <td class="no">10.</td>
            <td class="title">Sing About Me, I'm Dying of Thirst</td>
            <td><button class="btn"><i class="fa fa-bars"></i></button></td>
            <td class="duration">12:03</td>
          </tr>
          <tr>
            <td class="no">11.</td>
            <td class="title">Real (feat. Anna Wise)</td>
            <td><button class="btn"><i class="fa fa-bars"></i></button></td>
            <td class="duration">7:23</td>
          </tr>
          <tr>
            <td class="no">12.</td>
            <td class="title">Compton (feat. Dr. Dre)</td>
            <td><button class="btn"><i class="fa fa-bars"></i></button></td>
            <td class="duration">4:08</td>
          </tr>
        </table>
      </div>

      <div class="text" id="footnote">
        <h3>12 songs, 1 hour, 8 minutes</h3>
        <h4>&copy; 2012 Aftermath/Interscope Records</h4>
      </div>
    </div>
  </div>
</div>

Answer 1

Элемент <div class=“record”> имеет <img> внутри, и вы хотите, чтобы ваш <p> текст был чуть ниже изображения, поэтому давайте посмотрим на вашу структуру:

<div class="record"> имеет <img> и <div id="under"> под ним, разделенные логами c строки гибкого направления

Итак ... если вы не хотите изменять структуру своей страницы, которая должна иметь левую и правую области , просто создайте родительский элемент как для <img>, так и для сопутствующего <p>, например:

<div class=“cover”>
    <img src=“”>
    <p>my text goes here</p>
</div>

, а затем добавьте дополнительный css к этому новому элементу .cover, предполагая, что вы хотите, чтобы он был упорядочен по вертикали, как столбец с чем-то вроде:

display: flex;
flex-direction: column;

... так, чтобы <img> оставался над <p> текстом

Попробуйте и расскажите, как все прошло.

Ура

Answer 2

У вас может быть другой контейнер, который обертывает ваш элемент img и элемент p, чтобы он рассматривался как родственный элемент гибкого элемента для элемента #under.

<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>