三个图像并排，无需缩放即可响应

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

执行此操作的最佳方法是为父<div>提供类名，然后在不同的@media查询中对其应用不同的样式。有关@media at MDN的更多信息，请参阅。您可以使用this site或this site作为更简单但不太完整的概述，作为可以使用的媒体查询的备忘单。

一些可用于选择设备的代码示例如下：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您也可以使用text-align属性代替浮动。在下面的示例中，您可以看到我如何将它用于首页上的框。它们会自动调整为不同的屏幕尺寸（点击＆＃34;运行代码段＆＃34;然后点击＆＃34;完整页面＆＃34;）。

＆＃13;

＆＃13;

.entries-box {
  /* Style for box containing Frontpage boxes */
  text-align: center;
  padding: 0;
}
.entry {
  /* Style for a Frontpage box */
  display: inline-block;
  text-align: left;
  padding: 0.4em 0.8em 0.4em 0.8em;
  border: 1px solid black;
  margin: 0 1em 0.4em 0;
  border-radius: 10px;
  background: #007f59;
}

＆＃13;

<div class="entries-box">
  <div class="entry newest-e">
    <b>Title of Storie</b> - Genre (Lang icon)
    <br>'Excerpt of newest entry, max. 2 lines
    <br>Second line of excerpt...'
    <br>_User_
  </div>

  <div class="entry newest-e">
    <b>Title of Storie</b> - Genre (Lang icon)
    <br>'Excerpt of newest entry, max. 2 lines
    <br>Second line of excerpt...'
    <br>_User_
  </div>

  <div class="entry newest-e">
    <b>Title of Storie</b> - Genre (Lang icon)
    <br>'Excerpt of newest entry, max. 2 lines
    <br>Second line of excerpt...'
    <br>_User_
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;