<style lang="less">
@import "../style/weui.wxss"; // WXSS · 小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
@wx-width: 750rpx;
@wx-width_px: 750;
@wx-width-one_unit: @wx-width/750;
@color-main_red: #F00;
@color-main_blue: #2CABE2; // TODO 全局统一;2018年10月2日 16:29:42
@page-padding-horizontal: @wx-width-one_unit*12;
 
.pay-type {
// 布局图片前通过margin负值去除padding
margin: 0 -@page-padding-horizontal;
display: inline-flex;
}
.pay-type_icon {
// image-height("file.png")
@this-img_orign-width_px: 98; // 原图 宽度 高度 98 40 像素 96*96 dpi
@w: @wx-width/2;
@h: @w*40/98;
width: @w;
height: @h;
}
 
 
 
 
 
 
 

通过less 计算 得出图片均分布局的更多相关文章

  1. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  2. UIButton的文本与图片的布局

    UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢 其实很简单,今天总结下,目 ...

  3. 5分钟 搞定UIButton的文本与图片的布局

    UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢 其实很简单,今天总结下,目 ...

  4. CSS3实现图片木桶布局

    CSS3实现图片木桶布局 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <script> window.navigator.appVersion.inde ...

  5. IOS-UIButton的文本与图片的布局

    UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢 其实很简单,今天总结下,目 ...

  6. 对宽度的控制原则 git commit -a -m "M 1、完成less计算得出图片的均分布局;";git push origin master:master

    <script> import wepy from 'wepy' import api from '../api/api' export default class recharge ex ...

  7. 向Docx4j生成的word文档添加图片和布局--第一部分

    原文标题:Adding images and layout to your Docx4j-generated word documents, part 1 原文链接:http://blog.iprof ...

  8. css实现九宫格图片自适应布局

    我之前写九宫格自适应布局的时候,每个格子是使用媒体查询器(@media)或者js动态设置css,根据不同的手机屏幕宽度,适配不同手机,但是这样有个很大的缺点,那就是移动端的屏幕尺寸太多了,就得写很多代 ...

  9. 使用ul和li进行图片的布局

    使用ul和li进行浮动布局(自适应) 1 图片上下两排: 首先盒子的宽度要给100% ul包裹一个div,首先量好盒子的宽和高,并进行设置, margin 0 auto 盒子居中显示 每个li向左浮动 ...

随机推荐

  1. android开发全然退出activity

    我们退出Activity能够调用:finish(),system(0),可是这些都仅仅是单单退出单个Activity 也有人会说,直接把进程杀死,这些做法都不是非常可取.事实上我们翻看api能够发现. ...

  2. linux小技巧(1)

    1.避免文件夹拼写错误 shopt命令: 演示一下: 我想进入/home文件夹可是不小心拼写错了: [fulinux@ubuntu ~]$ cd /hoem-bash: cd: /hoem: No s ...

  3. linux 使用fdisk分区扩容,看介绍命令(未完)

    https://www.cnblogs.com/chenmh/p/5096592.html LVM 逻辑磁盘的一些命令 http://man.linuxde.net/vgcreate

  4. DSP6455的cmd文件

    DSP6455的cmd文件 CMD 的专业名称叫链接器配置文件,存放链接器的配置信息,DSP编译器的编译结果是未定位的,DSP也没有操作系统来定位执行代码,DSP系统的配置需求也不尽相同,因此需要定义 ...

  5. Qt 推断一个IP地址是否有效

    QHostAddress test; if (!test.setAddress("111.111.111.1")) { ui->statusBar->showMessa ...

  6. windows system.exe占用文件

    1)问题的原因是出于一个服务Application Experience,如果装好系统后就把此服务设为手动启动了,平时运行也没什么异常.但是win7在运行exe时如果没有这个服务的辅助就会长时间的占用 ...

  7. sscanf()的用法

    头文件 #include 定义函数 int sscanf (const char *str,const char * format,........); 函数说明             sscanf ...

  8. Java基础02 方法与数据成员(转载)

    对象中的数据成员表示对象的状态.对象可以执行方法,表示特定的动作. 此外,我们还了解了类(class).同一类的对象属于相同的类型(type).我们可以定义类,并使用该定义来产生对象.   调用同一对 ...

  9. linux oracle 配置监听器

    参考:http://database.51cto.com/art/201010/231338.htm 服务端: 1.增加一个listener:终端运行: $ORACLE_HOME/bin/netca ...

  10. VC++ 汇编相关的东西

    Tips: VC++在新建一个.asm文件后必须重新导入project中才能进行编译. 下面是一个汇编与C++相互调用的例子: Main.cpp #include <stdio.h> #i ...