三個圖像並排，響應而不縮放

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>