Как спустить блок в самый низ?

Question

Блок смещен поверх другого, не знаю в чем причина и как исправить. После него будут еще блоки, поэтому прижать его к самой жопе сайта не вариант.

.reviews-wrap {
  background-color: #f5f5f5;
}

.reviews {
  margin: 0;
  width: 100%;
}

.reviews-title {
  color: #445161;
  margin-bottom: 40px;
  font-size: 30px;
  font-weight: 400;
  font-family: sans-serif;
  text-align: center;
}

.reviews-info {
  display: inline-flex;
  color: #333333;
  width: 580px;
  margin-bottom: 40px;
}

.reviews-gray-block {
  width: 76px;
  height: 76px;
  border-radius: 40px;
  background-color: #445161;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}

.reviews-text {
  display: inline-block;
  font-style: oblique;
  background-color: #ebebeb;
  width: 470px;
  padding: 15px;
  border-radius: 10px;
}

.reviews-text p {
  color: #333333;
  margin-bottom: 15px;
}

.reviews-text b {
  color: #a4a4a4;
}

<div class="reviews-wrap">
  <div class="reviews">
    <div class="reviews-title">
      <p>Rewiews</p>
    </div>
    <div class="reviews-info">
      <div class="reviews-gray-block">

      </div>
      <div class="reviews-text">
        <p>Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus officiis sapiente necessitatibus commodi consectetur?</p>
        <b>Lourens S.</b>
      </div>
    </div>
    <div class="reviews-info">
      <div class="reviews-gray-block">

      </div>
      <div class="reviews-text">
        <p>Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus officiis sapiente necessitatibus commodi consectetur?</p>
        <b>Lourens S.</b>
      </div>
    </div>
    <div class="reviews-info">
      <div class="reviews-gray-block">

      </div>
      <div class="reviews-text">
        <p>Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus officiis sapiente necessitatibus commodi consectetur?</p>
        <b>Lourens S.</b>
      </div>
    </div>
    <div class="reviews-info">
      <div class="reviews-gray-block">

      </div>
      <div class="reviews-text">
        <p>Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus officiis sapiente necessitatibus commodi consectetur?</p>
        <b>Lourens S.</b>
      </div>
    </div>

Answer 1

Прикреплённого кода недостаточно, но я уже увидел, что в прикреплённом HTML в самом конце не хватает двух закрывающих блоков </div>

Вот пример, где я исправил этот момент, и разместил два тестовых блока до и после фрагмента кода. Ничего вроде не налезает друг на друга =/

.reviews-wrap {
  background-color: #f5f5f5;
}
.reviews {
  margin: 0;
  width: 100%;
}
.reviews-title {
  color: #445161;
  margin-bottom: 40px;
  font-size: 30px;
  font-weight: 400;
  font-family: sans-serif;
  text-align: center;
}
.reviews-info {
  display: inline-flex;
  color: #333333;
  width: 580px;
  margin-bottom: 40px;
}
.reviews-gray-block {
  width: 76px;
  height: 76px;
  border-radius: 40px;
  background-color: #445161;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}
.reviews-text {
  display: inline-block;
  font-style: oblique;
  background-color: #ebebeb;
  width: 470px;
  padding: 15px;
  border-radius: 10px;
}
.reviews-text p {
  color: #333333;
  margin-bottom: 15px;
}
.reviews-text b {
  color: #a4a4a4;
}

.testContent {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 44px;
  font-family: arial;
  font-weight: 800;  
}

.testContent.Before { background: yellow; color: lightgray; }
.testContent.After { background: lightgreen; color: gray; }

<div class="testContent Before">Контент до блока</div>

<div class="reviews-wrap">

  <div class="reviews">
  
      <div class="reviews-title">
          <p>Rewiews</p>
      </div>
      
      <div class="reviews-info">
      
          <div class="reviews-gray-block">

          </div>
          
          <div class="reviews-text">
              <p>Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus officiis sapiente necessitatibus commodi consectetur?</p>
              <b>Lourens S.</b>
          </div>
          
      </div>
      
      <div class="reviews-info">
          <div class="reviews-gray-block">

          </div>
          <div class="reviews-text">
              <p>Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus officiis sapiente necessitatibus commodi consectetur?</p>
              <b>Lourens S.</b>
          </div>
          
      </div>
      
      <div class="reviews-info">
      
          <div class="reviews-gray-block">

          </div>
          
          <div class="reviews-text">
              <p>Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus officiis sapiente necessitatibus commodi consectetur?</p>
              <b>Lourens S.</b>
          </div>
          
      </div>
      
      <div class="reviews-info">
      
          <div class="reviews-gray-block">

          </div>
          
          <div class="reviews-text">
              <p>Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus officiis sapiente necessitatibus commodi consectetur?</p>
              <b>Lourens S.</b>
          </div>
          
      </div>
      
  </div>
  
</div>

<div class="testContent After">Контент после блока</div>

БЛОГ НА HUSL

Как спустить блок в самый низ?

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