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

Ganother

发布于 2019-02-26 10:41:40

1.4K0

发布于 2019-02-26 10:41:40

文章被收录于专栏：SylvanasClub SylvanasClubSylvanasClub

自适应四宫格

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017-04-24，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度