enter image description here

It is necessary to impose a similar block. Tried, but it turns out inept garbage (perhaps because of the forgotten experience in the layout) :)

.gallery-block { height: 661px; } 
 <div class="gallery-block"> <!-- Подобие блока. --> <div style="float: left; width: 100%; max-width: 517px;"> <img style="height: 517px;" src="http://s6.pikabu.ru/post_img/big/2015/06/18/3/1434596941_632146314.jpg"> </div> <div style="float: left; width: 100%; max-width: 251px;"> <img style="height: 177px;" src="http://s6.pikabu.ru/post_img/big/2015/06/18/3/1434596941_632146314.jpg"> <img style="height: 177px;" src="http://s6.pikabu.ru/post_img/big/2015/06/18/3/1434596941_632146314.jpg"> <img style="height: 177px;" src="http://s6.pikabu.ru/post_img/big/2015/06/18/3/1434596941_632146314.jpg"> </div> <div style="float: left; width: 100%; max-width: 241px;"> <img style="height: 323px;" src="http://s6.pikabu.ru/post_img/big/2015/06/18/3/1434596941_632146314.jpg"> <img style="height: 323px;" src="http://s6.pikabu.ru/post_img/big/2015/06/18/3/1434596941_632146314.jpg"> </div> </div>

    1 answer 1

    It's easy to do this with flexbox . Like that:

     .gallery-block { display: flex; } .gallery-block div {overflow:hidden;margin:4px} .gallery-block div img {display:inline-block;margin:2px 0} 
     <div class="gallery-block"> <div style="width: 300px;height:351px;"> <img style="height: 100%;" src="http://s6.pikabu.ru/post_img/big/2015/06/18/3/1434596941_632146314.jpg"> </div> <div style="width: 251px;"> <img style="height: 111px;width:100%" src="http://s6.pikabu.ru/post_img/big/2015/06/18/3/1434596941_632146314.jpg"> <img style="height: 111px;width:100%" src="http://s6.pikabu.ru/post_img/big/2015/06/18/3/1434596941_632146314.jpg"> <img style="height: 111px;width:100%" src="http://s6.pikabu.ru/post_img/big/2015/06/18/3/1434596941_632146314.jpg"> </div> <div style="width: 241px;"> <img style="height: 171px;" src="http://s6.pikabu.ru/post_img/big/2015/06/18/3/1434596941_632146314.jpg"> <img style="height: 171px;" src="http://s6.pikabu.ru/post_img/big/2015/06/18/3/1434596941_632146314.jpg"> </div> </div>

    • Thank you very much, you really helped! A little on the topic of the question: maybe you could recommend a good article on flexbox ? - Timur Musharapov
    • one
      @TimurMusharapov, keep: css-tricks.com/snippets/css/a-guide-to-flexbox :) - Yuri
    • Thanks again! - Timur Musharapov