html - 三张图片并排，无需缩放即可响应

Question

我找不到我的问题的确切答案，所以希望有人能帮助我。

我有三张图片。我希望它们并排显示在大屏幕上。在较小的屏幕(平板电脑)上，我希望其中两个成行。

在小手机屏幕上，我希望它们全部排在彼此上方的行中，居中。

我目前的代码是:

<div align="center">
<div style="width: 371px; float: left;"><img src="{{media url="wysiwyg/magenthemes2/images/review1.png"}}" alt="" width="371" height="270" /></div>
<div style="width: 371px; float: left;"><img src="{{media url="wysiwyg/magenthemes2/images/review2.png"}}" alt="" width="371" height="139" /></div>
<div style="width: 371px; float: left;"><img src="{{media url="wysiwyg/magenthemes2/images/review3.png"}}" alt="" width="371" height="139" /></div>
</div>

但这行不通。它也不居中。我希望它呈现如下:

不同屏幕尺寸的响应示例

Answer 1

最好的方法是给 parent <div>一个类名，然后在不同的 @media 中对其应用不同的样式查询。更多可以阅读 @media at MDN .你可以使用 this site , 或 this site更简单但不太完整的概述，作为您可以使用媒体查询的备忘单。

适用于选定设备的一些代码示例是:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .imagebox > img {
    float:left;
  }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  .imagebox > img:first-child {
    float:left;
  }
}

<div align="center" class="imagebox">
  <div style="width: 371px; float: left;"><img src="https://placekitten.com/250/300" alt="" width="371" height="270" /></div>
  <div style="width: 371px; float: left;"><img src="https://placekitten.com/250/150" alt="" width="371" height="139" /></div>
  <div style="width: 371px; float: left;"><img src="https://placekitten.com/250/150" alt="" width="371" height="139" /></div>
</div>