HTML: размещайте контент DIV рядом, не перекрывая

Question

Как вы можете видеть ниже, у меня есть три коробки. Вы можете видеть, что во вставках 1 и 3 все работает отлично, но во вставке 2 текстовое содержимое перекрывается.

Это связано с тем, что <div> с классом .vertical_center.grade_info имеет опцию margin-left только для 100px. Я не хочу этих пересечений.

Как мне изменить margin-left для всех ящиков отдельно, чтобы избежать этой проблемы?

Вот мой код:

.three_separation {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 60px;
}

.grades_dashboard_box {
  height: 130px;
  width: 320px;
  background-color: #0d0d0d;
  color: #ffffff;
  margin: 0 auto;
  position: relative;
}

.grade_display {
  float: left;
  font-size: 60px;
}

.vertical_center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class="three_separation">
  <div class='grades_dashboard_box'>
    <div class="vertical_center">
      <h1 class="grade_display" id="grade_display_best">2.3</h1>
      <div class="vertical_center grade_info" style="margin-left: 100px;">
        <p style="font-size: 15px;">Beste Durchschnittsnote</p>
        <p id="grade_display_best_sub" style="font-size: 20px;">Biologie</p>
      </div>
    </div>
  </div>
  <div class='grades_dashboard_box'>
    <div class="vertical_center">
      <h1 class="grade_display" id="grade_display_average">13.70</h1>
      <div class="vertical_center grade_info" style="margin-left: 100px;">
        <p style="font-size: 15px;">Durchschnittsnote</p>
      </div>
    </div>
  </div>
  <div class='grades_dashboard_box'>
    <div class="vertical_center">
      <h1 class="grade_display" id="grade_display_worst">3.4</h1>
      <div class="vertical_center grade_info" style="margin-left: 100px;">
        <p style="font-size: 15px;">Schlechteste Durchschnittsnote</p>
        <p id="grade_display_worst_sub" style="font-size: 20px;">Deutsch</p>
      </div>
    </div>
  </div>
</div>

Answer 1

Возможно, вы могли бы использовать flex-box для достижения требуемого макета, обновив свой CSS следующим образом:

.grade_display {
  font-size: 60px;
}

/* Add this */
.grades_dashboard_box>div {
  /* Use flex box on the first div of .grades_dashboard_box */
  display: flex;
  /* Cause flex layout axis on this div to be horizontal */
  flex-direction: row;
  /* Cause children to center vertically */
  align-items: center;
}

/* Add this (replaces inline margin-left style) */
.grades_dashboard_box .grade_info {
  /* Add space to left of .grade_info */
  margin-left: 40px;
  /* Limit width to break small text onto two lines */
  width: 100px;
}


/* Add this */
.grades_dashboard_box h1 {
  /* Replace h1's default margin to enable vertical centering */
  margin: 0;
}

.three_separation {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 60px;
}

.grades_dashboard_box {
  height: 130px;
  width: 320px;
  background-color: #0d0d0d;
  color: #ffffff;
  margin: 0 auto;
  position: relative;
  /* Add this */
  display: flex;
  align-items: center;
}

<!-- remove margin-left:100px throughout -->
<div class="three_separation">
  <div class='grades_dashboard_box'>
    <div class="vertical_center">
      <h1 class="grade_display" id="grade_display_best">2.3</h1>
      <div class="vertical_center grade_info">
        <p style="font-size: 15px;">Beste Durchschnittsnote</p>
        <p id="grade_display_best_sub" style="font-size: 20px;">Biologie</p>
      </div>
    </div>
  </div>

  <div class='grades_dashboard_box'>
    <div class="vertical_center">
      <h1 class="grade_display" id="grade_display_average">13.70</h1>
      <div class="vertical_center grade_info">
        <p style="font-size: 15px;">Durchschnittsnote</p>
      </div>
    </div>
  </div>

  <div class='grades_dashboard_box'>
    <div class="vertical_center">
      <h1 class="grade_display" id="grade_display_worst">3.4</h1>
      <div class="vertical_center grade_info">
        <p style="font-size: 15px;">Schlechteste Durchschnittsnote</p>
        <p id="grade_display_worst_sub" style="font-size: 20px;">Deutsch</p>
      </div>
    </div>
  </div>
</div>

Answer 2

Аналогичный код с уменьшенной зависимостью CSS от сетки, которая динамически масштабируется

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body{
     display: grid;
     grid-template-columns: repeat(3,1fr);
     }
     div{
      height:100px;
      width:200px;
      background-color:black;
      color:white;
      display: flex;
      align-items: center;
     }
     h1{
         margin-right: 10px;
    }
    </style>
    </head>
    <body>

    <div>
    <h1>12.23</h1>
    <span>
    <p>lorem ipsum</p>
    <h3>ssc</h3>
    </span>
    </div>

    <div>
    <h1>12.23</h1>
    <span>
    <p>lorem ipsum test</p>
    </span>
    </div>

    <div>
    <h1>12.23</h1>
    <span>
    <h3>ssc</h3>
    </span>
    </div>

    </body>
    </html>