移动端两端对齐 + 图片宽度自适应

两盒软妹~` 提交于 2020-03-17 09:41:35

自适应四宫格

有这样一张设计稿,左右两边白色间距为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官网查看源码(请用响应式模式打开) 墨瞳漫画

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!