Почему этот img div отображается перед моими другими блоками?

Question

Я применил display: block к другим моим элементам, но мое изображение отображается спереди. Я думал, что display: block вызовет разрыв строки. Почему мое изображение впереди?

https://codepen.io/El_Escandalo/pen/PoPzXPZ?editors=1100

Answer 1

Это потому, что ваш .container div ограничен height: 200px;. Сотрите его, чтобы его высота соответствовала содержимому, и ваш контейнер с изображениями окажется под ним.

Answer 2

У вас есть дополнительный закрытый после контейнера C.

* {
  padding: 0;
  margin: 0;
}


.container {
  height: 200px;
  text-align: center;
  padding: none;
}

.a {
  height: 100px;
  width: 33%;
  background: red;
  display: block;
   padding: none;
  border: 10px solid purple;
  box-sizing: border-box;
}

.b {
  height: 100px;
  width: 33%;
  background: green;
  display: block;
    padding: none;
  border: 10px solid purple;
  box-sizing: border-box;

}

.c {
  height: 100px;
  width: 33%;
  background: blue;
  display: block;
  padding: none;
  border: 10px solid purple;
  box-sizing: border-box;
}


.d {
  border: 25px solid pink;
  margin: 0 auto;
  width: 75vw;
    height: auto;
  text-align: center;
  }

.d img {
  width: 100%;
}

<div class="container">
  
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="img-cont">
  <div class="d">
    <img src="https://cdn.pixabay.com/photo/2020/03/26/10/51/norway-4970019_1280.jpg" alt="view">
  </div>
</div>