发现移动端用弹性盒子布局起来更加的方便，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. stm32定时器中断类型分析

    一直在用的stm32定时器的中断都是TIM_IT_Update更新中断,也没问为什么,直到碰到有人使用TIM_IT_CC1中断,才想到这定时器的中断类型究竟有什么区别,都怪当时学习stm32的时候不够 ...

  2. aaa

    aaaa 来自为知笔记(Wiz)

  3. 利用反射调用方法时，处理ref，out参数需要注意的问题（转）

    转自:http://www.68idc.cn/help/buildlang/ask/20150318283817.html 项目中如下的泛型方法,因为要在运行时,动态指定类型参数,所以要利用反射来实现 ...

  4. 将项目上传到git上，并在测试服务器上运行

    上周我完成了我人生的第一个项目,并将它上传到gitHub上完成了团队合作.下面我将用倒叙的方法记录下,我的这段经历. 星期五,项目完成准备上传gitHub启动测试服务器. 1.git clone 项目 ...

  5. 简述linux的发行版，并描述不同发行版之间的联系与区别

    bash命令行返回值和展开 标签(空格分隔): bash,命令,状态,展开 1.命令状态结果和执行结果 (1)命令执行的状态返回值,命令执行完成之后,其执行状态结果值保存于bash的特殊状态变量$?中 ...

  6. Unity3D 之 iTween 相关

    有过 Flash 开发经验的朋友,对这个 iTween 应该感到非常熟悉吧,在 Flash 平台有一款功能几乎一样的插件 TweenLite,至于哪个先哪个后,有没有相互借鉴之类的就不在讨论范围了. ...

  7. 创建用资源管理器打开FTP位置

    FTP快捷方式默认用浏览器打开,而不是用资源管理器打开,管理文件不习惯. 解决方法1:创建桌面快捷方式 新建快捷方式,键入对象位置 %windir%\explorer.exe "ftp:// ...

  8. smartform

    SMARTFORMS中一般对于固定样式,格式的某一块会选择使用TEMPLATE或者TABLE. 表:上下高度不限,以窗口高度为限.循环输出表数据,每次循环都会按照表行输出,表头和表尾可控制输出.表行中 ...

  9. 学习PYTHON之路， DAY 6 - PYTHON 基础 6 (模块)

    一 安装,导入模块 安装: pip3 install 模块名称 导入: import module from module.xx.xx import xx from module.xx.xx impo ...

  10. MVC5+EF6 入门完整教程六

    本篇我们谈谈分部视图(Partial View). 上篇文章提到过Partial和Action这两个helper, 本篇文章主要就结合这两个helper来讲解分部视图(Partial View)的应用 ...