发现移动端用弹性盒子布局起来更加的方便，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. springmvc 用注解方式添加事务不生效解决方法

    springmvc 事务注册有很多种方法,在此我只mark 用注解方式添加transaction不生效的解决办法. springmvc 注解方法添加事务步骤: 1.在 spring的 root-con ...

  2. Android 6.0权限改变

    对于6.0以下的权限及在安装的时候,根据权限声明产生一个权限列表,用户只有在同意之后才能完成app的安装,造成了我们想要使用某个app,就要默默忍受其一些不必要的权限(比如是个app都要访问通讯录.短 ...

  3. nodejs的第五天学习笔记

    一.调试nodejs代码 1)使用console.log() 使用麻烦,用了以后还要删除 2)nodejs的自带调试器 -node debug a.js 没有任何作用,一个玩具,将来有一天可以会变得强 ...

  4. mysql操作查询结果case when then else end用法举例

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex          WHEN '1' THEN '男'          WHEN '2' THEN ...

  5. 撤销git reset soft head操作

    一不小心在eclipse的git库中执行了Reset Soft(HEAD ONLY)操作,不料界面中竟然没有找到撤销方法(于是心中五味俱全,经过一番折腾,无果还是回归Git本身),最终通过命令行,很快 ...

  6. TortoiseGit编辑全局变量支持https

    在windows,右键,进入tortoisegit的设置窗口,在左边树形菜单选Git,然后店"编辑全局.gid/config"按钮 输入以下文字 [http] sslVerify ...

  7. Java Integer(-128~127)值的==和equals比较产生的思考

    最近在项目中遇到一个问题,两个值相同的Integer型值进行==比较时,发现Integer其中的一些奥秘,顺便也复习一下==和equals的区别,先通过Damo代码解释如下: System.out.p ...

  8. asp.net "true"的小坑

    在cs文件中 写了一个 属性 protected bool IsTrue { get{ return true; } } 在页面 .aspx文件中 在js中 var flag="<%= ...

  9. Android 6编译环境搭建 （Marshmallow）

    1.安装 ubuntu 14.03 尽管android推荐 ubuntu 15, 安全起见,还是装LTS的14.04,步骤跳过 2. JDK: Marshmallow 需要 JDK8 ,添个源,顺手配 ...

  10. JS 面向对象、prototype原型的克隆

    JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...