Как я могу добавить простой текст под изображением?

Question

Я пытаюсь поместить текст под каждое изображение в альбоме. поэтому я добавил 6 фотографий рядом с плавающей точкой слева. Я знаю, что тег img является встроенным блоком по умолчанию, поэтому я поместил div с текстом класса с текстом внутри, а в CSS я назначил ему "display: block" таким образом, я думал, что сделаю так, чтобы он отображался под image .. почему этого не происходит? Я также попытался назначить тексту div ... абсолютную позицию и относительную позицию контейнера, но это работает только для первого изображения ...

  .conteiner {
  width: 100%;
  height: 50vh;
  margin-top: 50px;
  padding: 20px;
}

.box {
  background-image: url('xxx.jpg');
  background-size: cover;
  border: 1px solid black;
  width: calc(100% / 6 - 20px);
  height: 15vh;
  float: left;
  margin: 10px;
  background-position: center;
}

.clearfix {
  content: '';
  display: table;
  clear: both;
  .text {
    display: block;
  }

<div class="conteiner clearfix">

  <div class="box">

  </div>
  <div class="text">
    Recenti
  </div>

  <div class="box">

  </div>

  <div class="box">

  </div>

  <div class="box">

  </div>

  <div class="box">

  </div>

  <div class="box">

  </div>
</div>

введите описание изображения здесь это то, что у меня есть

введите описание изображения здесь и это что я хочу делать

Answer 1

Попробуйте следующее:

https://codepen.io/the-wrong-guy/pen/xxZzBwR

.box {
  display: grid;
}

Answer 2

Было бы намного проще использовать Grid или Flexbox, чтобы получить такой макет. Нет необходимости в float и clear.

Использование сетки:

.container {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   width: 100%;
   height: 50vh;
   margin-top: 50px;
   padding: 20px;
}

Затем просто поместите сначала 6 изображений, чтобы заполнить первую строку, и 6 текстов, вторые, чтобы заполнить вторую строку.

       <div class="container">

          <div class="box">

          </div>

          <div class="box">

          </div>

          <div class="box">

          </div>

          <div class="box">

          </div>

          <div class="box">

          </div>

          <div class="box">

          </div>
        <div class="text">
           Recenti
        </div>
        <div class="text">
           Recenti
        </div>
        <div class="text">
           Recenti
        </div>
        <div class="text">
           Recenti
        </div>
        <div class="text">
           Recenti
        </div>
        <div class="text">
           Recenti
        </div>
    </div>

Кроме того, размер содержимого сетки будет изменен так, чтобы заполнить область сетки, поэтому вам, возможно, не придется явно изменять размер поля.

.box{
  background-image: url('xxx.jpg');
  background-size: cover;
  border: 1px solid black;
  width: 100%;
  height: 15vh;
  background-position: center;
}