三幅图像并排，反应灵敏，无需缩放答案

【问题标题】：Three images side by side, responsive without scaling三幅图像并排，反应灵敏，无需缩放
【发布时间】：2016-08-27 02:49:52
【问题描述】：

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

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

在手机的小屏幕上，我希望它们都排成一行，居中。

我目前的代码是：

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

但这不正确。它也没有居中。我希望它像这样呈现：

不同屏幕尺寸的响应式示例

【问题讨论】：

使用 @media 查询或简单地使用 Bootstrap 框架

标签： html image css responsive-design

【解决方案1】：

最好的方法是给父<div> 一个类名，然后在不同的@media 查询中应用不同的样式。更多信息可以阅读@mediaat 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>

【讨论】：

【解决方案2】：

除了浮动，您还可以使用 text-align 属性。在下面的示例中，您可以看到我如何将它用于首页上的框。它们会自动适应不同的屏幕尺寸（点击“Run code sn-p”，然后点击“Full page”）。

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

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

【讨论】：

谢谢你们。它成功了。