Добрый день, подскажите пожалуйста ответ или дайте совет на такой вполне банальный и нубский вопрос, проблема возникла в позиционировании фото при этом что б контент ни куда не уплывал и расположение фотографий на различных устройствах не влияли на расположение самого контента, вот думаю как лучше через бустрап или стандартными методами это реализовать....
-
Думаю при такой постановке задачи без JS не обойтись.– toxxxaCommented 13 авг. 2016 в 12:53
-
можно и без ЖС обойтись но будет извращение, можно для каждого типа устройств делать блокам с фотографиями display:none и ну и ращмеры чуть фотографий подправить что б они шире были, но мне кажется это не правильно и есть проще способ– user3319778Commented 13 авг. 2016 в 12:55
-
Дублировать все фотографии по 3-4 раза под каждую ширину сетки? Фигня какая. А переместить все фото под текст никак?– toxxxaCommented 13 авг. 2016 в 13:04
-
1Сегодня ответил на схожий вопрос на английском СО: stackoverflow.com/a/38928711/6263942 Делал на бутстрапе и jQuery,– Gleb KemarskyCommented 13 авг. 2016 в 16:07
-
Спасибо Всем! и Gleb Kemarsky - спасибо огромное, как раз то что нужно! Напиши в ответ этой темы, я поставлю тебе плюс на полезность ответа или подскажи как, я тут слегка новичёк просто, оставить положительный коммент тебе в профиль, с радостью оставлю его– user3319778Commented 13 авг. 2016 в 18:03
Добавить комментарий
|
2 ответа
До и после "неподвижного" контента размещаем бутстраповские строки и добавляем скрипт на jQuery, который по мере необходимости перекидывает колонки из одной строки в другую и обратно.
Сегодня ответил на схожий вопрос на английском СО. Вот его адаптация под ваши условия:
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>Этот текст не двигается, а фотографии прыгают через него по мере необходимости</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>
-
1Gleb ты шедевр , я фанатею– user33274Commented 14 авг. 2016 в 3:32
* {
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>
Это же обычная плашка - position: fixed; z-index: 9999; да и все.
-
-
да ради бога, смотрите код. могу даже вертикально отцентрировать... Commented 13 авг. 2016 в 13:11
-
3
-
-
toxxxa я только не понял каким образом изображение будет прыгать через текст– user33274Commented 13 авг. 2016 в 13:17