避免图像在手机上堆叠

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>