避免圖像在手機上堆疊

Question

我剛開始學習編碼，並決定使用squarespace和www.rociodelfa.com來設計我的網站。

我的主要問題是，在我的靈感頁面我有一個需要遵循連貫順序的圖像庫，並且我想修復每行圖像的數量，但對於每一行都不相同。

在移動設備上打開時，圖像被堆疊。我該如何改變它？

Answer 1

檢查我附加的代碼。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper { 
 
    width: 20%; /* Let's assume you want 5 pictures in a row, so 100%/5 = 20% */ 
 
    float: left; 
 
    padding: 10px; 
 

 
    } 
 
.wrapper img { 
 
    width: 100%; 
 
}

<div class="wrapper"> 
 
    <img src="http://placehold.it/300x300"> 
 
</div> 
 
<div class="wrapper"> 
 
    <img src="http://placehold.it/300x300"> 
 
</div> 
 
<div class="wrapper"> 
 
    <img src="http://placehold.it/300x300"> 
 
</div> 
 
<div class="wrapper"> 
 
    <img src="http://placehold.it/300x300"> 
 
</div> 
 
<div class="wrapper"> 
 
    <img src="http://placehold.it/300x300"> 
 
</div> 
 
<div class="wrapper"> 
 
    <img src="http://placehold.it/300x300"> 
 
</div> 
 
<div class="wrapper"> 
 
    <img src="http://placehold.it/300x300"> 
 
</div> 
 
<div class="wrapper"> 
 
    <img src="http://placehold.it/300x300"> 
 
</div> 
 
<div class="wrapper"> 
 
    <img src="http://placehold.it/300x300"> 
 
</div> 
 
<div class="wrapper"> 
 
    <img src="http://placehold.it/300x300"> 
 
</div>