发现移动端用弹性盒子布局起来更加的方便，box-flex:val;特别是图文展示的时候，如下面的

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,user-scalable=no">

        <title></title>

    </head>

    <body>

        <div class="row">

            <div class="col" style="position: relative;display: -webkit-box;width: 100%;">

                <div style="-webkit-box-flex:1;box-flex:1">

                    <div class="" style="padding-top: 100%;position: relative;"><a><img style="width:100%;height:100%;position: absolute;top:0px;left:0px" src="html5/img/vacation2.png"/></a></div>

                </div>

                <div class="" style="-webkit-box-flex:2;box-flex:1;position: relative;"></div>

            </div>

        </div>

    </body>

</html>

省去你手动给百分比而且还有计算，这里图片也是方形的，移动端有一个好处就是宽度不用定义，直接等于device-width！而且这里图片外层用了一个padding-top：100%；这里是个技巧哦！如何你没有发现，你可以自己去体验一样，就可以发现这个padding-top用到的巧妙之处

弹性盒子之wap端布局的更多相关文章

  1. CSS3总结五：弹性盒子(flex)、弹性盒子布局

    弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...

  2. css弹性盒子新旧兼容

    前言:本篇随笔是对弹性盒子有了解的人来写的这篇文章,具体属性产生的效果这里不做说明,基础的东西去查文档.这里只是总结. 时至今日,css3的flex弹性盒子在移动端基本上都是支持的,但不排除有些些低版 ...

  3. css弹性盒子学习

    css3弹性盒子是一种布局方式,在适应不同的屏幕大小的时候,能够确保元素拥有更恰当的排布行为.它只是视觉呈现上的,即显示顺序适应显示空间,与源代码无关,源代码顺序不受影响. 定义一个弹性盒子: 在cs ...

  4. 弹性盒子FlexBox简介（一）

    一.理解弹性盒子 弹性盒子是CSS3的一种新的布局模式. CSS3弹性盒子(Flexible Box或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素拥有恰当的行为的布局方 ...

  5. css3弹性盒子 flex布局

    CSS3 弹性盒 1.display:flex 说明: 设置为弹性盒(父元素添加) 2.flex-direction(主轴排列方式) 说明: 顺序指定了弹性子元素在父容器中的位置 row 默认在一行内 ...

  6. 弹性盒子布局flexbox

    弹性盒子display:flexbox一般应用于父元素的容器上,然后对子元素来进行弹性布局 设置了flexbox的父元素不能设置具体的宽度与高度的值,而是通过子元素来设置值,父元素弹性的包裹既可 相关 ...

  7. CSS3响应式布局之弹性盒子

    CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...

  8. flex属性值----弹性盒子布局

    里面的属性都 是在有display: flex的情况 下才生效. 兼容性写法:   display: -webkit-box; /*老版本语法: Safari, iOS, Android browse ...

  9. flex弹性盒子布局

    一.在需要使用弹性盒子的容器上添加属性:display:flex 或者 display:inline-flex; 二.在父容器上添加flex-direction设置子元素主轴方向: 不写默认值是X轴从 ...

随机推荐

  1. python3 不同目录间模块调用

    #Author by Andy #_*_ coding:utf-8 _*_ #__file__获取当前程序的相对路径 import os,sys #print(__file__) # os.path. ...

  2. adaboost原理与实践

    Adaboost是一种迭代算法,其核心思想是针对同一个训练集训练不同的分类器(弱分类器),然后把这些弱分类器集合起来,构成一个更强的最终分类器(强分类器).其算法本身是通过改变数据分布来实现的,它根据 ...

  3. Excel中提取最大值的问题

    在使用excel的时候,碰到了一个如下的问题 意思是以每个字母为条件,取这个字母下面的数字中的最大值,需要注意一个问题是每个字母下面的数字个数不一定相等,例如d下面有四个数字,可以设置如下公式解决: ...

  4. js递归方法创建节点

    var jsonData = [{,,"subnetRemark":"状态自带","subnetName":"中心网络" ...

  5. python调用zabbix接口实现Action配置

    要写这篇博客其实我的内心是纠结的,老实说,我对zabbix的了解实在不多.但新公司的需求不容置疑,当我顶着有两个头大的脑袋懵懵转入运维领域时,面前摆着两百多组.上千台机器等着写入zabbix监控的需求 ...

  6. ueditor使用小结

    一.简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.baidu.com/webs ...

  7. NXOPEN环境配置

    1.找到NX中的vc文件夹 D:\study software\NX\NX9.0\UGOPEN\vs_files

  8. Mac Mysql初始密码重置

    今天晚上mac更新后重装MySQL 安装完成后 启动服务,死活登录不了 提示1045错误.按照网上的资料对MySQL密码进行重置.记录步骤如下: 1.首先关闭MySQL服务 系统偏好设置->最下 ...

  9. Linux 关机命令

    正确的关机流程是:sync –> shutdown/reboot/halt/poweroff sync 将数据由内存同步到硬盘中. shutdown 关机指令.例如你可以运行如下命令关机: sh ...

  10. HDU 3033 分组背包变形（每种至少一个）

    I love sneakers! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...