自适应四宫格
有这样一张设计稿,左右两边白色间距为4px,中间间距为10px,每一行的两张图是等宽的(即平分去掉间距后的宽度)
有一种方法是和设计师商量,把所有的具体尺寸改为百分比尺寸。。这个布局不太好写的主要原因是,在宽度上,百分比(50%)与实际尺寸(4px 10px)混杂,所以做到宽度自适应的话会有困难。
下面是正经的一种写法:
图片单元float,宽度设置为50%,奇数单元设置margin-right为10px, 偶数单元设置margin-right为-10px。父元素设置左padding为4px,右padding为14px,父元素的padding值正好是所有间距的总和,所以它实际宽度的50%是正好符合需求的图片单元宽度。偶数单元的负margin(-10px)和父元素右padding(14px)会中和成4px的右边距(实际上是因为元素负margin会使其右边的元素向左移动并被其覆盖)
运营的同学在实际操作中,做的图可能不会很标准,所以我们需要做一些简单地容错,即是图片垂直居中在图片单元内,图片单元设置padding-top为一个百分比,这个百分比为设计稿中图片的宽高比。这样即使图片有些误差也不会影响总体的排版布局,垂直居中的原理是 top 百分比的基数是父元素 translate百分比的基数是元素本身。
实际代码如下
<dl class="four-item-list"> <dd class="item"> <div class="img-bar"><img src="" alt="" class="img"></div> </dd> <dd class="item"> <div class="img-bar"><img src="" alt="" class="img"></div> </dd> <dd class="item"> <div class="img-bar"><img src="" alt="" class="img"></div> </dd> <dd class="item"> <div class="img-bar"><img src="" alt="" class="img"></div> </dd> </dl>
.four-item-list{ overflow: hidden; padding: 4px 14px 0 4px; .item{ width: 50%; margin: 0 10px 18px 0; float: left; &:nth-child(even){ margin-right: -10px; } } .img-bar{ padding-top: 71%; position: relative; border-radius: 4px; overflow: hidden; } .img{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; } }
自适应六宫格
有了上面四宫格的经验,类似的这种六宫格布局动动脑子也很容易写
代码如下
<dl class="six-item-list"> <dd class="item"> <div class="img-bar"><img src="" alt="" class="img"></div> </dd> <dd class="item"> <div class="img-bar"><img src="" alt="" class="img"></div> </dd> <dd class="item"> <div class="img-bar"><img src="" alt="" class="img"></div> </dd> <dd class="item"> <div class="img-bar"><img src="" alt="" class="img"></div> </dd> <dd class="item"> <div class="img-bar"><img src="" alt="" class="img"></div> </dd> <dd class="item"> <div class="img-bar"><img src="" alt="" class="img"></div> </dd> </dl>
.six-item-list{ overflow: hidden; padding: 4px 14px 0 4px; .item{ width: 33.3%; margin: 0 5px 18px 0; float: left; &:nth-child(3n+0){ margin-right: -10px; } } .img-bar{ padding-top: 100%; position: relative; border-radius: 4px; overflow: hidden; } .img{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; } }
demo
欢迎大家到墨瞳漫画h5官网查看源码(请用响应式模式打开) 墨瞳漫画