Картинки по 3 в ряд [закрыт]

160

05 июля 2019, 05:40

Нужна помощь, есть 7 картинок, нужно расположить их в 2 ряда по 3 и 1 снизу по центру, но еще под каждой картинкой нужен текст, что-то типо должности. Как это реализовать

Answer 1

.container { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
} 
 
.item { 
  flex-basis: 33%; 
  display: flex; 
  justify-content: center; 
  margin-bottom: 20px; 
} 
 
.item-box { 
  text-align: center; 
} 
 
.item:last-child { 
  flex-basis: 100%; 
}

<div class="container"> 
  <div class="item"> 
    <div class="item-box"> 
      <img src="https://via.placeholder.com/150" alt="" /> 
      <p>text</p> 
    </div> 
  </div> 
  <div class="item"> 
    <div class="item-box"> 
      <img src="https://via.placeholder.com/150" alt="" /> 
      <p>text</p> 
    </div> 
  </div> 
  <div class="item"> 
    <div class="item-box"> 
      <img src="https://via.placeholder.com/150" alt="" /> 
      <p>text</p> 
    </div> 
  </div> 
  <div class="item"> 
    <div class="item-box"> 
      <img src="https://via.placeholder.com/150" alt="" /> 
      <p>text</p> 
    </div> 
  </div> 
  <div class="item"> 
    <div class="item-box"> 
      <img src="https://via.placeholder.com/150" alt="" /> 
      <p>text</p> 
    </div> 
  </div> 
  <div class="item"> 
    <div class="item-box"> 
      <img src="https://via.placeholder.com/150" alt="" /> 
      <p>text</p> 
    </div> 
  </div> 
  <div class="item"> 
    <div class="item-box"> 
      <img src="https://via.placeholder.com/150" alt="" /> 
      <p>text</p> 
    </div> 
  </div> 
</div>

Ну как вариант flex (кажется можно и почище сделать)