发现移动端用弹性盒子布局起来更加的方便，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. Software Engineering: 3. Project planning

    recourse: "Software Engineering", Ian Sommerville Keywords for this chapter: planning sche ...

  2. ajax中使用post传值数组array

    如果我们在data中想放入array的参数,根据在网上搜索的结果有如下方法,但是没有一个成功的……我还是贴出来,别人成功了,也许是我哪里不对,日后也许还有机会研究..在文章的最后贴出了转化为json的 ...

  3. js数据类型

    JavaScript数据类型是非常简洁的,它只定义了6中基本数据类型 null:空.无.表示不存在,当为对象的属性赋值为null,表示删除该属性 undefined:未定义.当声明变量却没有赋值时会显 ...

  4. Unity3D 中的定时器

    不算上 C# 自带的,目前知道两种,以下分别介绍. 1.每帧检查 定义一个时间变量 timer,每帧将此时间减去帧间隔时间 Time.deltaTime,如果小于或者等于零,说明定时器到了,执行相应功 ...

  5. iPhone5停留在语音的界面，提示按三次home键，无法继续下去

    不知道之前用户是怎么操作的,可能是刷机或恢复出厂设置.穷人,没用玩过iPhone. 根据提示关键词,网上搜索,发现只需要按三次home,三次锁屏,三次锁屏,最后再三次home就可以了. 试了两次,还真 ...

  6. [转载]来，让我们谈一谈Normalize.css

    来源 : http://segmentfault.com/a/1190000002239676 ---------------------------------------------------- ...

  7. 学习iOS

    最近想学习一下iOS开发,不过一点基础都没有,得先从熟悉object-C语法开始,在此把学习中的一些知识点作为记录. mac pro常用操作 学习ios[1]Objective-C 基本语法 学习io ...

  8. 对象列表转换为DataTable或DataTable转换为对象列表.

    /**********************************************************************************/ // 说明: 数据转换工具. ...

  9. qt越来越好了

    qml中所有的商业控件都开源了,详见: import QtQuick.Extras 1.4 以前自己实现的时候实现了半天.

  10. Handle机制的原理

    Android提供了Handle和Looper来满足线程间的通信.Handle先进先出原则.Looper类用来管理特定线程内对象之间的消息交换(Message Exchange). 1.Looper: ...