避免图像在手机上堆叠
问题描述:
我刚开始学习编码,并决定使用squarespace
和www.rociodelfa.com
来设计我的网站。避免图像在手机上堆叠
我的主要问题是,在我的灵感页面我有一个需要遵循连贯顺序的图像库,并且我想修复每行图像的数量,但对于每一行都不相同。
在移动设备上打开时,图像被堆叠。我该如何改变它?
答
检查我附加的代码。
* {
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>
当你有移动第一网站,图像时屏幕的宽度减小叠加。如果你可以添加一个codepen或小提琴,那么我们可能会帮助你。 – Aslam