<style> .span11{ float: left; width: 100px; margin-left: 1px; } .span11 img{ max-width: 100%; height: auto; } .wr{ width:303px; } </style> <div class="wr"> <div class="span11"> <a href="http://www.bgpics.ru/pictures/1536x2048/2043-leto-1536x2048.jpg"><img src="http://www.bgpics.ru/pictures/1536x2048/2043-leto-1536x2048.jpg" alt=""></a> </div> <div class="span11"> <a href="https://f.vividscreen.info/soft/66d0826256cf1c80b823ae39c38b36a9/Manhattan-Bridge-New-York-City-wide-l.jpg"><img src="http://s1.1zoom.me/big7/194/USA_Skyscrapers_Boston_466431.jpg" alt=""></a> </div> <div class="span11"> <a href="https://i.imgpile.com/2e15654b28e456cb505d2936902e7772.md.jpg"><img src="http://s1.1zoom.me/big3/803/374490-svetik.jpg" alt=""></a> </div> </div>

https://jsfiddle.net/1zm997dc/8/

I clarify: so that all img were aligned and packaged in div class = "wr" regardless of the size of the image. All pictures must be equal in width and height between each other and exactly fit into wr container

  • And you indicated that the images should be aligned? but as? horizontally or vertically, or maybe horizontally and vertically? - Ruslan
  • What about overflow-x: hidden for the desired div ? - Eugen Eray
  • jsfiddle.net/1zm997dc/12 - Proshka
  • The first picture is vertical and all the time creeps beyond the bottom edge. What just did not try. Well, do not cut it to the same size - Proshka
  • Do you want to use scripts? - Eugen Eray

1 answer 1

Try flexbox
https://jsfiddle.net/1zm997dc/13/

 .span11{ } .span11 img{ max-width: 100%; height: auto; } .wr{ width:500px; display: flex; flex-grow: 1; justify-content: space-between; border: 1px solid #D4D4D4; } 
 <div class="wr"> <div class="span11"> <a href="http://www.bgpics.ru/pictures/1536x2048/2043-leto-1536x2048.jpg"><img src="http://www.bgpics.ru/pictures/1536x2048/2043-leto-1536x2048.jpg" alt=""></a> </div> <div class="span11"> <a href="https://f.vividscreen.info/soft/66d0826256cf1c80b823ae39c38b36a9/Manhattan-Bridge-New-York-City-wide-l.jpg"><img src="http://s1.1zoom.me/big7/194/USA_Skyscrapers_Boston_466431.jpg" alt=""></a> </div> <div class="span11"> <a href="https://i.imgpile.com/2e15654b28e456cb505d2936902e7772.md.jpg"><img src="http://s1.1zoom.me/big3/803/374490-svetik.jpg" alt=""></a> </div> <div class="span11"> <a href="http://www.bgpics.ru/pictures/1536x2048/2043-leto-1536x2048.jpg"><img src="http://www.bgpics.ru/pictures/1536x2048/2043-leto-1536x2048.jpg" alt=""></a> </div> </div>

Amendment...
DOUBLE 2 - https://jsfiddle.net/1zm997dc/14/

 .span11{ } .span11 img{ height: 100px; } .wr{ width:500px; display: flex; flex-grow: 1; justify-content: space-between; border: 1px solid #D4D4D4; } 
 <div class="wr"> <div class="span11"> <a href="http://www.bgpics.ru/pictures/1536x2048/2043-leto-1536x2048.jpg"><img src="http://www.bgpics.ru/pictures/1536x2048/2043-leto-1536x2048.jpg" alt=""></a> </div> <div class="span11"> <a href="https://f.vividscreen.info/soft/66d0826256cf1c80b823ae39c38b36a9/Manhattan-Bridge-New-York-City-wide-l.jpg"><img src="http://s1.1zoom.me/big7/194/USA_Skyscrapers_Boston_466431.jpg" alt=""></a> </div> <div class="span11"> <a href="https://i.imgpile.com/2e15654b28e456cb505d2936902e7772.md.jpg"><img src="http://s1.1zoom.me/big3/803/374490-svetik.jpg" alt=""></a> </div> <div class="span11"> <a href="http://www.bgpics.ru/pictures/1536x2048/2043-leto-1536x2048.jpg"><img src="http://www.bgpics.ru/pictures/1536x2048/2043-leto-1536x2048.jpg" alt=""></a> </div> </div>

clearfix

 .cfix::after { content: ""; display: table; clear: both; }

The cfix class cfix be added to the parent block.

  • so they povylazili even worse in height - Proshka
  • @Proshka, fixed))) right?) - Ruslan
  • Cool! This is a good decision. And how without flex? Can you think of it? I want to understand in principle, why this happens. After all, the picture with the specified properties MUST sit inside the div - Proshka
  • @Proshka, only if you use scripts. but in defense of flexbox I want to say that it supports 97.68% of webservers' browsers ... caniuse.com/#search=flex - Ruslan
  • @Proshka, and why the pictures climbs for div? The fact is that float works with its own specifics. and it needs to be disabled (reset, reset, etc.) you can use clearfix for the parent block for this now add in response) - Ruslan