<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-RelativeLayout布局技巧(一)

    如果有一个需求是这样的,在标题中的右上角有一个button <?xml version="1.0" encoding="utf-8"?> <L ...

  2. iovec结构体定义及使用 (转)

    I/O向量(struct iovec) readv(2)与writev(2)函数都使用一个I/O向量的概念.这是由所包含的文件定义的: #include <sys/uio.h> 头文件定义 ...

  3. (六)Oracle学习笔记—— 约束

    1. 约束介绍 表虽然建立完成了,但是表中的数据是否合法并不能有所检查,而如果要想针对于表中的数据做一些过滤的话,则可以通过约束完成,约束的主要功能是保证表中的数据合法性. 按照约束的分类,一共有五种 ...

  4. MySQL-配置优化技巧

    一.连接请求配置 1.查询当前连接数(show full processlist) show full processlist; 2.最大连接数(max_connections) max_connec ...

  5. scrollTop()--返回或设置匹配元素的滚动条的垂直位置

    scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. scroll top offset 指的是滚动条相对于其顶部的偏移. 如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移. ...

  6. html&css基础框架

    原文地址:http://www.w3cplus.com/framework/index.php

  7. 【web开发学习笔记】Structs2 Result学习笔记(一)简介

    Structs2 Result学习笔记(一)简介 问题一 <struts> <constant name="struts.devMode" value=" ...

  8. GuozhongCrawler系列教程 (2) CrawTaskBuilder具体解释

    GuozhongCrawler是分层架构.要高速学习CrawlTask独立的配置多少要了解框架的源码.所以CrawTaskBuilder提供要更加扁平且易于理解的的方式创建CrawTask 方法具体资 ...

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

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

  10. 开源管理系统OSSIM设置 语言为中文简体

    最近研究OSSIM系统,OSSIM的安装是做好的ISO,操作系统选择的是CentOS 64Bit系统.我使用的OSSIM 4.11 的ISO安装,虽然系统说明支持中文,实际上,只是台湾的繁体中文而以. ...