Смещение Div вниз при добавлении в него какого-то элемента.[HTML/CSS]

Question

Моей целью было создание вот такого на моем сайте:

Для этого я разместил 2 блока по 3 дива в каждом. Но при этом если я пытаюсь добавить картинку в каждый из дивов и еще что-то сверху,то происходит несуразица,типа такого:

Подскажите как это можно пофиксить или какой есть способ сделать это? Прилагаю также код той секции,где я все реализую:

.main_section-four {
  width: 1280px;
  height: 1298px;
  margin-left: 80px;
}

.main_section-four_h3 {
  font-size: 35px;
  line-height: 42px;
  color: rgba(16, 39, 70, 1);
}

.main_section-four_hr {
  width: 253px;
  float: left;
  border: 1px solid rgba(0, 109, 254, 1);
  margin-bottom: 54px;
}

.main_section-four_cards {
  width: 1280px;
  height: 1192px;
  display: inline-block;
  font-size: 0px;
}

.main_section-four_cards_case1 {
  width: 1280px;
  height: 567px;
  font-size: 0px;
  margin-bottom: 58px;
}

.main_section-four_cards_case1>div {
  width: 392px;
  height: 567px;
  display: inline-block;
  margin: 0 52px 0 0;
  padding: 0 0 0 0;
  background-color: #102746;
  background-size: cover;
  background-position: center;
}

.main_section-four_cards_case1 div:last-child {
  margin-right: 0px;
}

.main_section-four_cards_case2>div {
  width: 392px;
  height: 567px;
  display: inline-block;
  margin: 0 52px 0 0;
  padding: 0 0 0 0;
  font-size: 0px;
  background-color: #102746;
}

.main_section-four_cards_case2>div:last-child {
  margin-right: 0px;
}

<section class="main_section-four">
  <h3 class="main_section-four_h3">Today top places to visit</h3>
  <hr class="main_section-four_hr">
  <div class="main_section-four_cards">
    <div class="main_section-four_cards_case1">
      <div>
        <img src="/image/cards/nagoya.jpg" alt="">
      </div>
      <div></div>
      <div></div>
    </div>
    <div class="main_section-four_cards_case2">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>


</section>

Answer 1

Очень тяжело будет с inline-block. Немного исправил код на flex. может поможет. Картинку (img) не исправлял т.к. надо под неё отдельные стили написать

.main_section-four {
  width: 1280px;
  height: 1298px;
  margin-left: 80px;
}

.main_section-four_h3 {
  font-size: 35px;
  line-height: 42px;
  color: rgba(16, 39, 70, 1);
}

.main_section-four_hr {
  width: 253px;
  float: left;
  border: 1px solid rgba(0, 109, 254, 1);
  margin-bottom: 54px;
}

.main_section-four_cards {
  width: 1280px;
  height: 1192px;
  /* display: inline-block; */
  display: flex; /* Добавил */
  flex-direction: column; /* Добавил */
  font-size: 0px;
}

.main_section-four_cards_case1 {
  display: flex; /* Добавил */
  width: 1280px;
  height: 567px;
  font-size: 0px;
  margin-bottom: 58px;
}
.main_section-four_cards_case2 {
  display: flex; /* Добавил */
}

.main_section-four_cards_case1>div {
  width: 392px;
  height: 567px;
  /*display: inline-block;*/
  margin: 0 52px 0 0;
  padding: 0 0 0 0;
  background-color: #102746;
  background-size: cover;
  background-position: center;
}

.main_section-four_cards_case1 div:last-child {
  margin-right: 0px;
}

.main_section-four_cards_case2>div {
  width: 392px;
  height: 567px;
  /*display: inline-block;*/
  margin: 0 52px 0 0;
  padding: 0 0 0 0;
  font-size: 0px;
  background-color: #102746;
}

.main_section-four_cards_case2>div:last-child {
  margin-right: 0px;
}

<section class="main_section-four">
  <h3 class="main_section-four_h3">Today top places to visit</h3>
  <hr class="main_section-four_hr">
  <div class="main_section-four_cards">
    <div class="main_section-four_cards_case1">
      <div>
        <img src="https://fakeimg.pl/250x100/ff0000/" alt="">
      </div>
      <div></div>
      <div></div>
    </div>
    <div class="main_section-four_cards_case2">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>


</section>

БЛОГ НА HUSL

Смещение Div вниз при добавлении в него какого-то элемента.[HTML/CSS]

Ответы (1 шт):