Верстка блока с картинками

508

21 декабря 2016, 03:29

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

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

Попробовала 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>

Answer 1

Вариант 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>

Answer 2

Я бы все-таки делал с 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>