2

Всем здравствуйте! Не так давно начала осваивать верстку и пока испытываю проблемы с подбором инструментов к задаче.

Сейчас задача собрать большой блок из картинок в ряды, под каждой размещается короткая подпись (фамилия, имя). Не могу понять,как лучше это сделать. введите сюда описание изображения

Попробовала flex, но не понравилось, как ведут себя блоки при ресайзе, плюс появились не ясные мне расстояния между блоками.

.box_gorozhane {
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-around;
 justify-content: space-around;
 }
.img_gorozhane {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
text-align: center;
}

Также попробовала display: inline-block, но в таком случае съезжает подпись к фото.

Каким образом лучше всего это реализовать?

HTML код сейчас такой

<div class=box_gorozhane>
<div class=img_gorozhane>
<img src=".png">
<p>Фамилия Имя</p>
</div>
<div class=img_gorozhane>
<img src=".png">
<p>Фамилия Имя</p>
</div>
<div class=img_gorozhane>
<img src=".png">
<p>Фамилия Имя</p>
</div>
</div>

2 ответа 2

2

Вариант 1 - inline-block:

a {
  display: block;
}

.bit {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin: .25rem;
}
<div class="row">
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div><div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div><div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div><div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div><div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div><div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div><div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div><div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
</div>

Вариант 2 - flex (поддержка):

.row {
  overflow: hidden;
  display: flex;
  flex-flow: row wrap;
  overflow: hidden;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
}

a {
  display: block;
}

.bit {
  text-align: center;
  margin: .25rem;
}
<div class="row">
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
</div>

Вариант с float:

*{box-sizing: border-box;}

.row {
  overflow: hidden;
}

a {
  display: block;
}

.bit {
  text-align: center;
  padding: .5%;  
}

@media (min-width: 500px){
  .bit {
    text-align: center;
    width: 20%;
    float: left;
    padding: .5%;  
  }
}
<div class="row">
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
  <div class="bit">
    <img src="https://dummyimage.com/100x100/ccc/fff" alt="">
    <a href="#">Name Name</a>
  </div>
</div>

1
  • Спасибо большое! Очень хорошие варианты, возьму себе их все на заметку! В своей задаче использовала вариант с float
    – Alla
    20 дек 2016 в 10:57
0

Я бы все-таки делал с flex, но можно и с инлайнблоками, если вы хотите "контролировать" все расстояния и размеры. Например так:

.img_gorozhane{
  display:inline-block;
  position:relative;
  width:200px;
  height:300px;
  margin:10px;
  background:lightgrey;
}

.img_gorozhane p {
  position:absolute;
  bottom:10px;
  left:10px;
  margin:0;
}

.img_gorozhane img {
 background:grey;
 width:190px;
 height:260px;
 position:relative;
 top:5px;
 left:5px;
}
<div class=box_gorozhane>
<div class=img_gorozhane>
<img src=".png">
<p>Фамилия Имя</p>
</div>
<div class=img_gorozhane>
<img src=".png">
<p>Фамилия Имя</p>
</div>
<div class=img_gorozhane>
<img src=".png">
<p>Фамилия Имя</p>
</div>
</div>

4
  • 1
    флекс мне тоже симпатичнее, но у меня почему-то появляются непонятные отступы внутри флекс-бокса (хотя все изображения одинаковые по размеру) и странно ползут при ресайзе. Хотя с инлайн и вовсе никак не ползут)
    – Alla
    19 дек 2016 в 14:12
  • У вас стоит свойство justify-content: space-around; для контейнера, оно распределяет контент в контейнере равномерно с отступами между контентам и стенками. Замените его на justify-content: flex-start; и весь контент прижмется к левой стенке контейнера.
    – Mikl
    19 дек 2016 в 14:17
  • 1
    все-равно какие-то фото почему-то начинают растягиваться. Что необходимо прописать в таблице стилей, чтобы они сохраняли свои пропорции?
    – Alla
    19 дек 2016 в 14:41
  • вам необходимо задать стили для .img_gorozhane{flex: 0 0 200px}, также размеры и` background-size:cover;` для img. (200 пикселей написал для примера)
    – Mikl
    19 дек 2016 в 14:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.