Отзывчивая бок о бок изображения

Question

Im пытается создать отзывчивый макет в тему, которая выглядит так: http://postimg.org/image/7r6jo647l/. Я пробовал все и не могу получить желаемый результат. Я обращаюсь к более светлым умом на reddit за помощью. Любая помощь вообще была бы оценена, я назвал изображение frustrating.jpg, которое в значительной степени говорит все: -/

Я не ищу, чтобы кто-то выполнял работу, просто указывайте мне в правильном направлении .. Перед тем, как я вылезла, вырывая волосы.

Answer 1

, что легко с помощью Bootstrap - следующее будет создавать 4 смежных divs для изображений - они будут складываться горизонтально в одну строку из 4 на средних и больших размерах, два ряда двух соседних изображений на маленьких экранах и будут складываться вертикально на мобильных (xs) экранах.

// строка из 4 смежных изображений

<div class="row"> 
    <div class="col-md-3 col-sm-6"> 
     <img src="smallImage-1.jpg" alt="Small Image1"> 
    </div> 
    <div class="col-md-3 col-sm-6"> 
     <img src="smallImage-2.jpg" alt="Small Image2"> 
    </div> 
    <div class="col-md-3 col-sm-6"> 
     <img src="smallImage-3.jpg" alt="Small Image3"> 
    </div> 
    <div class="col-md-3 col-sm-6"> 
     <img src="smallImage-4.jpg" alt="Small Image5"> 
    </div> 
</div> 

Answer 2

Если ваша тема должна учитывать переменное количество изображений с помощью CSS, чтобы справиться с этим:

Минимальный набор дисплея: гибкий дисплей: стол для изображение обертка

скрипку с прогибается находится по адресу:

https://jsfiddle.net/xma6kbxa/

.wrap, .wrap *{ 
 
box-sizing:border-box; 
 
} 
 

 
.wrap{ 
 
    display:flex; 
 
    margin-left:-5px; 
 
    margin-right:-5px; 
 
    clear:left; 
 
    width:100%; 
 
    border:1px solid blue; 
 
} 
 
.wrap .holder{ 
 
    margin:5px; 
 
    } 
 
    .wrap img{ 
 
    width:100%; 
 
    height:auto; 
 
    } 
 
}

<div class="wrap"> 
 
<div class="holder"><img src="http://placehold.it/350x150"></div> 
 
<div class="holder"><img src="http://placehold.it/350x150"></div> 
 
<div class="holder"><img src="http://placehold.it/350x150"></div> 
 
<div class="holder"><img src="http://placehold.it/350x150"></div> 
 
</div> 
 

 
<div class="wrap"> 
 
<div class="holder"><img src="http://placehold.it/350x150"></div> 
 
<div class="holder"><img src="http://placehold.it/350x150"></div> 
 
<div class="holder"><img src="http://placehold.it/350x150"></div>

Примечание FWIW основной прогибается поддержка довольно широк. http://caniuse.com/#feat=flexbox