三个图像并排，响应而不缩放

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

而是浮动的，你也可以用文本对齐属性的工作。在以下示例中，您可以看到我是如何将它用于首页上的框。它们会自动调整为不同的屏幕尺寸（点击“运行代码片段”，然后点击“整页”）。

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

Answer 2

要做到这一点，最好的办法是给父<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>