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

JerryC 发布于2019-08-29 12:29 / 2660人阅读

摘要：自适应四宫格有这样一张设计稿，左右两边白色间距为，中间间距为，每一行的两张图是等宽的即平分去掉间距后的宽度有一种方法是和设计师商量，把所有的具体尺寸改为百分比尺寸。。

自适应四宫格

有这样一张设计稿，左右两边白色间距为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百分比的基数是元素本身。

实际代码如下

.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%;
    }
 }

自适应六宫格

有了上面四宫格的经验，类似的这种六宫格布局动动脑子也很容易写

代码如下

  .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官网查看源码（请用响应式模式打开）墨瞳漫画

云服务器 GPU云服务器移动端自适应自适应宽度宽度自适应自适应宽度按钮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111931.html

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

摘要：自适应四宫格有这样一张设计稿，左右两边白色间距为，中间间距为，每一行的两张图是等宽的即平分去掉间距后的宽度有一种方法是和设计师商量，把所有的具体尺寸改为百分比尺寸。。自适应四宫格有这样一张设计稿，左右两边白色间距为4px，中间间距为10px，每一行的两张图是等宽的（即平分去掉间距后的宽度） showImg(http://www.ganother.com/images/four-it...

atinosun 2019-08-01 16:43 评论0 收藏0
margin详解

摘要：属性指定了盒的区的宽度。简写属性一次性设置四周的，而其它属性只设置它们各侧的。 margin属性指定了盒的margin区的宽度。margin简写属性一次性设置四周的margin，而其它margin属性只设置它们各侧的。这些属性适用于所有元素，但非替换行内元素上的竖直margin将不会产生任何效果 margin与容器尺寸 margin与可视尺寸 margin与可视尺寸只适用于没有设定...

stonezhu 2019-08-29 12:25 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
css样式

摘要：注意换行默认值上对齐下对齐垂直居中文本基线对齐设置所有的其他去除苹果点击事件的灰色阴影有些元素需要设置背景色。居中布局中居中是很重要的技术，掌握居中的技巧，对布局相当重要 /* flex 垂直居中 */ *{ margin: 0; padding: 0; } .container{ height: 100...

cppprimer 2019-08-29 15:28 评论0 收藏0