2

Добрый день, подскажите пожалуйста ответ или дайте совет на такой вполне банальный и нубский вопрос, проблема возникла в позиционировании фото при этом что б контент ни куда не уплывал и расположение фотографий на различных устройствах не влияли на расположение самого контента, вот думаю как лучше через бустрап или стандартными методами это реализовать....

введите сюда описание изображения

5
  • Думаю при такой постановке задачи без JS не обойтись.
    – toxxxa
    Commented 13 авг. 2016 в 12:53
  • можно и без ЖС обойтись но будет извращение, можно для каждого типа устройств делать блокам с фотографиями display:none и ну и ращмеры чуть фотографий подправить что б они шире были, но мне кажется это не правильно и есть проще способ Commented 13 авг. 2016 в 12:55
  • Дублировать все фотографии по 3-4 раза под каждую ширину сетки? Фигня какая. А переместить все фото под текст никак?
    – toxxxa
    Commented 13 авг. 2016 в 13:04
  • 1
    Сегодня ответил на схожий вопрос на английском СО: stackoverflow.com/a/38928711/6263942 Делал на бутстрапе и jQuery, Commented 13 авг. 2016 в 16:07
  • Спасибо Всем! и Gleb Kemarsky - спасибо огромное, как раз то что нужно! Напиши в ответ этой темы, я поставлю тебе плюс на полезность ответа или подскажи как, я тут слегка новичёк просто, оставить положительный коммент тебе в профиль, с радостью оставлю его Commented 13 авг. 2016 в 18:03

2 ответа 2

3

До и после "неподвижного" контента размещаем бутстраповские строки и добавляем скрипт на 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>Этот текст не&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>

1
  • 1
    Gleb ты шедевр , я фанатею
    – user33274
    Commented 14 авг. 2016 в 3:32
-3

* {
  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; да и все.

12
  • А если высота плашки динамическая? Даже без "если".
    – toxxxa
    Commented 13 авг. 2016 в 13:01
  • да ради бога, смотрите код. могу даже вертикально отцентрировать... Commented 13 авг. 2016 в 13:11
  • 3
    посмотрите еще раз на задачу.
    – toxxxa
    Commented 13 авг. 2016 в 13:15
  • по вашему я не понял задание? тогда растолкуйте. Commented 13 авг. 2016 в 13:17
  • toxxxa я только не понял каким образом изображение будет прыгать через текст
    – user33274
    Commented 13 авг. 2016 в 13:17

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.