Proper adaptive positioning

Question

Good afternoon, please tell me the answer or give advice on such a completely banal and Nubian question, the problem arose in positioning the photos, while the content wouldn’t go anywhere and the arrangement of the photos on various devices would not affect the layout of the content itself, so I think the best way is through or standard methods to implement it ....

it is possible to do without the LW but there will be a perversion, it is possible for each type of device to do blocks with photos display: none and well, and raschmery a little photos to correct what would they have been wider, but it seems to me that it is not correct and there is an easier way
Today I answered a similar question in English CO: stackoverflow.com/a/38928711/6263942 Did it on the bootstrap and jQuery,
and Gleb Kemarsky - thank you very much, just what you need!
Write in response to this topic, I will give you a plus for the usefulness of the answer or tell me how, I’m just a little new here, leave a positive comment to you in profile, I will gladly leave it

Community spirit ♦ one · Accepted Answer · 2016-08-13T18:18:49

Before and after the "fixed" content we place the bootstrap strings and add the script to jQuery, which, as necessary, transfers the columns from one line to another and back.

Today answered a similar question in English CO . Here is his adaptation to your conditions:

https://jsfiddle.net/glebkema/ax21j93h/

$(document).ready(function() { var selectAfter = $( '#after' ); var selectBefore = $( '#before' ); var numBefore = 1; checkBefore(); $(window).resize( checkBefore ); function checkBefore() { var widthNew = window.innerWidth; if ( widthNew < 768 ) { setBefore(1) } else if ( widthNew < 992 ) { setBefore(2) } else if ( widthNew < 1200 ) { setBefore(3) } else { setBefore(4) }; } function setBefore( numNew ) { while ( numBefore > numNew ) { selectBefore.children( 'div:last-child' ).prependTo( selectAfter ); numBefore--; } while ( numBefore < numNew ) { selectAfter.children( 'div:first-child' ).appendTo( selectBefore ); numBefore++; } } });

 .row > div { margin-bottom: 16px; text-align: center; } .row > div > img { max-width: 100%; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container"> <div class="row" id="before"> <div class="col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/300x300/c69/f9c/?text=1" alt=""></div> </div> <div class="row"> <div class="col-xs-12"><h2>Этот текст не&nbsp;двигается, а&nbsp;фотографии прыгают через него по&nbsp;мере необходимости</h2></div> </div> <div class="row" id="after"> <div class="col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/300x300/9c6/cf9/?text=2" alt=""></div> <div class="col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/300x300/69c/9cf/?text=3" alt=""></div> <div class="col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/300x300/c69/f9c/?text=4" alt=""></div> <div class="col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/300x300/9c6/cf9/?text=5" alt=""></div> <div class="col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/300x300/69c/9cf/?text=6" alt=""></div> <div class="col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/300x300/c69/f9c/?text=7" alt=""></div> <div class="col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/300x300/9c6/cf9/?text=8" alt=""></div> <div class="col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/300x300/69c/9cf/?text=9" alt=""></div> <div class="col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/300x300/c69/f9c/?text=10" alt=""></div> <div class="col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/300x300/9c6/cf9/?text=11" alt=""></div> <div class="col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/300x300/69c/9cf/?text=12" alt=""></div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Answer 2 · 2016-08-13T12:59:47

 * { padding: 0; margin: 0; } body { position: relative; } .content { position: fixed; z-index: 9999; width: 100vw; /* по умолчанию высота динамическая, если нужна фиксированная высота - добавим height: 60vh; */ top: 50vh; transform: translate(0, -50%); background-color: rgba(255, 255, 0, .8); box-sizing: border-box; padding: 4vh 6vw; text-indent: 6vw; } .wrapper { display: flex; justify-content: space-around; flex-wrap: wrap; padding-top: 1em; } .wrapper img { margin-bottom: 1em; }

 <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales hendrerit enim, vel vehicula mauris elementum ut. Aenean sed finibus ligula, ac egestas felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. </div> <div class="wrapper"> <img src="http://beerhold.it/160/120"> <img src="http://beerhold.it/160/120"> <img src="http://beerhold.it/160/120"> <img src="http://beerhold.it/160/120"> <img src="http://beerhold.it/160/120"> <img src="http://beerhold.it/160/120"> <img src="http://beerhold.it/160/120"> <img src="http://beerhold.it/160/120"> <img src="http://beerhold.it/160/120"> <img src="http://beerhold.it/160/120"> <img src="http://beerhold.it/160/120"> <img src="http://beerhold.it/160/120"> </div>

This is the usual die - position: fixed; z-index: 9999; and that's all.

toxxxa I just did not understand how the image will jump through the text

Proper adaptive positioning

2 answers 2

More articles: