There is a text block on the left side. On the right side is a block with images. The idea is that after the end of the text, the right block with pictures becomes 100% wide, and the images occupy the entire width. I played a lot, but did not get the desired result. On the right side there will be as many pictures as you like. Need a speaker.

Well, actually the question is how to make the images increase after the end of the left block?

.container{ overflow:hidden; width:100%; } .container .left_sidebar{ width:745px; margin:0 0 0 55px; } .container .right_sidebar img{ height: 100%; padding: 0 0 10px 10px; } .left{ float: left; } 
 <div class="container"> <aside class="left_sidebar left"> <p>тут какой-то текст</p> <p>тут какой-то текст</p> <p>тут какой-то текст</p> <p>тут какой-то текст</p> </aside> <aside class="right_sidebar"> <img src="http://toursdekiev.com.ua/files/Building_Himeras.jpg"> <img src="http://toursdekiev.com.ua/files/Building_Himeras.jpg"> <img src="http://toursdekiev.com.ua/files/Building_Himeras.jpg"> <img src="http://toursdekiev.com.ua/files/Building_Himeras.jpg"> </aside> </div>

illustration

  • Alas, but no .... - FanG

2 answers 2

Is that good? You can open the snippet on the full screen and change the width of the window so that the text presses a different number of pictures to the right.

https://jsfiddle.net/glebkema/h3yy14gp/

 .for-text { float: left; } .for-image { overflow: hidden; } .for-image img { width: 100%; } 
 <div class="for-text"> <p>Paragraph.</p> <p>Paragraph Paragraph.</p> <p>Paragraph Paragraph Paragraph.</p> <p>Paragraph.</p> <p>Paragraph Paragraph.</p> <p>Paragraph Paragraph Paragraph.</p> </div> <div class="for-image"><img src="//placehold.it/900x300/c69/f9c/" alt=""></div> <div class="for-image"><img src="//placehold.it/900x300/9c6/cf9/" alt=""></div> <div class="for-image"><img src="//placehold.it/900x300/69c/9cf/" alt=""></div> <div class="for-image"><img src="//placehold.it/900x300/c69/f9c/" alt=""></div> <div class="for-image"><img src="//placehold.it/900x300/9c6/cf9/" alt=""></div> <div class="for-image"><img src="//placehold.it/900x300/69c/9cf/" alt=""></div> <div class="for-image"><img src="//placehold.it/900x300/c69/f9c/" alt=""></div> <div class="for-image"><img src="//placehold.it/900x300/9c6/cf9/" alt=""></div> <div class="for-image"><img src="//placehold.it/900x300/69c/9cf/" alt=""></div> 

     .container { overflow: hidden; width: 100%; } .container .left_sidebar { width: 40%; margin: 0 0 0 55px; display: table-cell; vertical-align: middle; } .container .right_sidebar { width: 40%; margin: 0 0 0 55px; display: table-cell; vertical-align: middle; } .container .right_sidebar img { width: 100%; height: auto; padding: 0 0 10px 10px; display: inline; } .container .full_sidebar img { width: 100%; height: auto; padding: 0 0 10px 10px; display: inline; } 
     <div class="container"> <aside class="left_sidebar"> <p>тут какой-то текст</p> <p>тут какой-то текст</p> <p>тут какой-то текст</p> <p>тут какой-то текст</p> </aside> <aside class="right_sidebar"> <img src="http://toursdekiev.com.ua/files/Building_Himeras.jpg"> </aside> <aside class="full_sidebar"> <img src="http://toursdekiev.com.ua/files/Building_Himeras.jpg"> <img src="http://toursdekiev.com.ua/files/Building_Himeras.jpg"> <img src="http://toursdekiev.com.ua/files/Building_Himeras.jpg"> </aside> </div>

    • In this case, the pictures do not increase, and do not occupy the entire width. About increasing my joint, not explicitly written. Images below should increase their size to 100% - FanG
    • All the same not that. I can have text for 2 pictures at the side, and for 3 pictures. - FanG
    • FanG is a matter of js, on css such (if I am not mistaken) is not done, mathematical functions are barely supported but not such - user33274
    • Yes, if the text height is much larger then js should be used. You can see masonry.desandro.com can help. - Dmitriy Kondratiuk
    • Dmitriy Kondratiuk masonry has no chapels here, he doesn’t have to do bricks - I don’t even get into my head - how to implement - user33274