Layout block with pictures

Question

Hello everybody! Not so long ago I began to master the layout and while I have problems with the selection of tools for the task.

Now the task is to collect a large block of images into rows, under each is placed a short signature (last name, first name). I can not understand how best to do it.

I tried flex, but I didn’t like how the blocks behave when resizing, plus there were some unclear distances between the blocks.

.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; }

I also tried display: inline-block, but in this case the caption of the photo is moving.

How best to implement this?

HTML code is now

 <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>

HamSter HamSter 18k five 33 83 · Accepted Answer · 2016-12-19T17:16:22

Option 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>

Option 2 - flex ( support ):

 .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>

Option with 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>

Thank you very much! Very good options, take note of them all! In her task she used the variant with float - Alla

Mikl mikl 3.181 five 14 · Answer 2 · 2016-12-19T13:52:38

I would still do with flex, but you can with inline blocks if you want to “control” all distances and sizes. For example:

 .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>

Flex is also nicer to me, but for some reason I have incomprehensible indents inside the flex-box (although all the images are the same in size) and strangely crawl when resizing.
for a container, it distributes the content in the container evenly with indentations between the contents and the walls.
and all the content will be pressed against the left wall of the container.
What needs to be written in the style sheet so that they keep their proportions?
you need to set styles for .img_gorozhane{flex: 0 0 200px} , also sizes and `background-size: cover;` for img.

Layout block with pictures

2 answers 2

More articles: