<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. Andrew Ng机器学习课程6

    Andrew Ng机器学习课程6 说明 在前面尾随者台大机器学习基石课程和机器学习技法课程的设置,对机器学习所涉及到的大部分的知识有了一个较为全面的了解,可是对于没有动手敲代码并加以使用的情况,基本上 ...

  2. 解决Odoo访问fonts.googleapis.com导致速度慢的问题

    Odoo中有些css文件引用了谷歌字体,但因为谷歌服务器被墙,导致部分页面加载受影响. 解决方法如下: 360网站卫士常用前端公共库CDN服务把谷歌字体库都存到它的CDN上了,因此我们只需把样式表中谷 ...

  3. UVA 11534 - Say Goodbye to Tic-Tac-Toe(博弈sg函数)

    UVA 11534 - Say Goodbye to Tic-Tac-Toe 题目链接 题意:给定一个序列,轮流放XO,要求不能有连续的XX或OO.最后一个放的人赢.问谁赢 思路:sg函数.每一段.. ...

  4. 【Python 数据分析】Numpy模块

    Numpy模块可以高效的处理数据,提供数组支持.很多模块都依赖他,比如:pandas.scipy.matplotlib 安装Numpy 首先到网站:https://www.lfd.uci.edu/~g ...

  5. vs2015+opencv-3.2.0-vc14配置

    用的VS2015免费的community社区版,功能足矣. 很早就有配置opencv249,原本觉得低版本的稳定,一直没有配成功过,测试总是报错 出现error LINK:无法打开文件“opencv_ ...

  6. MQTT压力测试之Tsung的使用

    简介 Tsung 是一个压力测试工具,可以测试包括HTTP, WebDAV, PostgreSQL, MySQL, LDAP, and XMPP/Jabber等服务器.针对 HTTP 测试,Tsung ...

  7. rational rose 2007安装破解全过程

    1:下载安装文件 下载地址: http://pan.baidu.com/s/1c0ldKEs 2:下载虚拟光驱 由于下载的文件须要光驱安装,所以须要下载一个虚拟光驱,虚拟光驱名称:daemon too ...

  8. 水滴状的自己定义视图,让您摆脱单调的Dialog

    转载请注明出处:王亟亟的大牛之路 如今各种各样的进度条的呈现方式各种各样,我们老旧的条状条子和转圈圈的方式已经无法满足我们的业务需求,今天亟亟上的是一个水滴状循环滚动的一个自己定义视图.你能够把他用在 ...

  9. android应用多线程守护让你非常难杀死它

    1.android 应用开启后启动一个服务 public class TestserviceActivity extends Activity { /** Called when the activi ...

  10. Failed to load http://localhost:8080/team.php: Request header field x-jwt-header is not allowed by Access-Control-Allow-Headers in preflight response.

    axios 加入header之后,请求出现 Failed to load http://localhost:8080/team.php: Request header field x-jwt-head ...