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;}

图像在较小的屏幕中显示一个在另一个下方

2 个答案: