Good day. There is this:

#wrapper { border: 1px solid black; margin: auto; width: 70%; text-align: center; } .block { margin: 10px; text-align: center; width: 140px; display: inline-block; border: 1px solid black; } .block img { width: 140px; } 
 <div id='wrapper'> <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> <h4>ะšะฐะบะพะน-ั‚ะพ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะดะปะธะฝะฝั‹ะน ั‚ะตะบัั‚</h4> </div> <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> <h4>ะšะฐะบะพะน-ั‚ะพ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ</h4> </div> <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> <h4>ะฐะบะพะน-ั‚ะพ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡</h4> </div> <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> <h4>ะพะน-ั‚ะพ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝ</h4> </div> <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> <h4>ะฐะบะพะน-ั‚ะพ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะฐะบะพะน-ั‚ะพ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡</h4> </div> <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> <h4>ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝ</h4> </div> </div>

In each block there is a picture and text below it. However, in each block the text may be of different lengths (within reasonable limits, of course). Nevertheless, it turns out that the pictures are dancing (see the example above). Oh yeah, it's worth noting that the number of such blocks in a row depends on the width of the screen.

It would be great if the height of the blocks was automatically adjusted and had the same height everywhere.

Due to lack of experience, I imagine only two options : to make all the blocks of a single maximum width (but I donโ€™t like this option much, because it may happen that all blocks have little text) or use js, which iterates over all h4, finds the maximum height h4 and applies it to all h4 (see below)

 max = null; jQuery(".block h4").each(function(i) { v = $(this).height(); if (max < v) { max = v; } }); jQuery(".block h4").css('height', max + 'px');

Maybe there is some other option that I do not suspect?

  • when using inline-block in grid building, it would be nice to set another vertical-align: top property vertical-align: top - pepel_xD

1 answer 1

  #wrapper{ display: flex; flex-flow: row wrap; justify-content: space-around; } .block{ width: 200px; flex-flow: row wrap; border: 1px solid #888; } .block img { width: 140px; height: 140px; } 
 <div id='wrapper'> <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> <h4>ะšะฐะบะพะน-ั‚ะพ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะดะปะธะฝะฝั‹ะน ั‚ะตะบัั‚</h4> </div> <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> <h4>ะšะฐะบะพะน-ั‚ะพ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ</h4> </div> <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> <h4>ะฐะบะพะน-ั‚ะพ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡</h4> </div> <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> <h4>ะพะน-ั‚ะพ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝ</h4> </div> <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> <h4>ะฐะบะพะน-ั‚ะพ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะฐะบะพะน-ั‚ะพ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡</h4> </div> <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> <h4>ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝ ะพั‡ะตะฝัŒ ะพั‡ะตะฝัŒ ะพั‡ะตะฝ</h4> </div> </div>