изображений, следующих друг за другом на маленьких экранах

Question

, мы используем приведенный ниже код для отображения 4 изображений, но его не реагируют так же, как в link1, в основном средние 2 изображения во 2-й строке отображаются ниже под другим на меньших экранах.

если кто-то хочет: Jsfiddle

мы используем подобный код в link2, но это выглядит отзывчивым.

.top-designs1 > h1, .mens-block > h1, .womens-collection > h1, .fan-book > h1 {color: #000;padding-top: 5px;text-align: center;} 
 
.tow-grid1 .left {float: left;width: 50%;} 
 
.tow-grid1 .right {float: right;width: 50%;} 
 
.full-grid1 {margin-bottom: 10px;}

<div class="top-designs1"> 
 
<div class="tow-grid1"> 
 

 
<div class="full-grid1"> 
 
<img src="http://sbdev2.kidsdial.com:81/media/wysiwyg/a1.jpg" width="1000px" /> 
 
</div> 
 

 
<div style="clear: both; margin-bottom: -10px;">&nbsp; 
 
</div> 
 

 
<div class="left"> 
 
<img src="http://sbdev2.kidsdial.com:81/media/wysiwyg/a2.jpg"}}" width="495px" /> 
 
</div> 
 

 
<div class="right"> 
 
<img src="http://sbdev2.kidsdial.com:81/media/wysiwyg/a3.jpg"}}" width="495px" /> 
 
</div> 
 

 

 
<div style="clear: both; margin-bottom: -10px;">&nbsp; 
 
</div> 
 

 

 
<div class="full-grid1"> 
 
<img src="http://sbdev2.kidsdial.com:81/media/wysiwyg/a4.jpg" width="1000px" /> 
 
</div> 
 

 
</div> 
 
</div>

Answer 1

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

<div class="grid"> 
    <div class="item"> 
    <img src="http://placehold.it/350x300"> 
    </div> 
    <div class="item"> 
    <img src="http://placehold.it/350x300"> 
    </div> 
</div> 

.grid { 
    display: flex; 
    height: 300px; 
    flex-wrap: wrap; 
    max-width: 1024px; 
} 

.item { 
    flex-basis: 50%; 
    height: 300px; 
    min-width: 350px; 
} 

http://codepen.io/pedromrb/pen/EZNBQZ

Надеется, что это помогает, вы можете изменить его размер, чтобы увидеть его завернуть.

Любой вопрос не стесняйтесь спрашивать.

Answer 2

Вы можете проверить с этим, если вы хотите, чтобы сделать изображение отзывчивого

.top-designs1 img{ width:100%; display:block;}