<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">

     <title>Document</title>

     <style>

         /*

         要想设置当前容器的高度或宽度百分比，必须“明确”知道父容器的高度或宽度

   */

         * {

             padding: 0;

             margin: 0;

         }

         .one {

             width: 20%;

             height: 100px;

             float: left;

             background: red;

         }

         .two {

             width: 30%;

             float: left;

             background: blue;

         }

         .three {

             width: 50%;

             height: 100px;

             float: left;

             background: green;

         }

         .four {

             width: 50%;

             height: 50%;

             background: #fff;

         }

     </style>

 </head>

 <body>

     <div class="one"></div>

     <div class="two"></div>

     <div class="three">

         <div class="four"></div>

     </div>

 </body>

 </html>

h5移动端百分比的更多相关文章

  1. H5移动端知识点总结

    H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解display:box的布局 理解flex布局 Flex布局兼容知识点总结 回到顶部 移动开 ...

  2. 10天学会phpWeChat——第七天：创建一个自适应PC网站+H5移动端的模块

    本教程基于phpWeChat核心框架1.1.0+版本.下载地址:http://s.phpwechat.com/app_38026ed22fc1a91d92b5d2ef93540f20 通过前面六讲的系 ...

  3. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  4. 旅行app(游记、攻略、私人定制) | 顺便游旅行H5移动端实例

    <顺便游旅行>是一款H5移动端旅行app,提供目的地(国内.国外.周边)搜索.旅游攻略查询.游记分享.私人定制4大模块,类似携程.同程.去哪儿.马蜂窝移动端,只不过顺便游app界面更为简洁 ...

  5. H5移动端项目案例、web手机微商城实战开发

    自微信生态圈一步步强大后,关于移动端购物的趋势,逐渐成为大众关心的内容,目前市场上关于移动商城的制定就有大量版本,比如.微商城.移动商城.移动webAPP.微信商城各等各种定义层出不穷,这就对于移动端 ...

  6. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  7. 亲历H5移动端游戏微信支付接入及那些坑（二）——获取Openid和授权

    第一篇中将一些坑说明,那么这篇开始正式进入接入步骤.具体的参数说明,我不会列出,毕竟微信官方文档都有,我想大家都看的懂,而且这接口也有可能微信会变动,所以不列出来,也是不想引起大家的误解,接入步骤只起 ...

  8. H5安卓端浏览器如何去除select的边框？

    H5安卓端浏览器如何去除select的边框? android下没有问题,在apple下无三角号. -webkit-appearance:none; border-radius:0

  9. h5移动端常见虚拟键盘顶起底部导航栏解决办法

    在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var ...

随机推荐

  1. 转：GitHub 万星推荐成长技术清单

    转:http://www.4hou.com/info/news/7061.html 最近两天,在reddit安全板块和Twitter上有个GitHub项目很火,叫“Awesome Hacking”. ...

  2. python调试工具----pycharm快捷键及一些常用设置

    pycharm快捷键及一些常用设置 Alt+Enter 自动添加包Ctrl+t SVN更新Ctrl+k SVN提交Ctrl + / 注释(取消注释)选择的行Ctrl+Shift+F 高级查找Ctrl+ ...

  3. HZAU 1207 Candies（线段树区间查询 区间修改）

    [题目链接]http://acm.hzau.edu.cn/problem.php?id=1207 [题意]给你一个字符串,然后两种操作:1,将区间L,R更新为A或者B,2,询问区间L,R最长的连续的B ...

  4. poj 1068（模拟题）

    Parencodings Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 23545   Accepted: 13802 De ...

  5. python队列、线程、进程、协程(转)

    原文地址: http://www.cnblogs.com/wangqiaomei/p/5682669.html 一.queue 二.线程 #基本使用 #线程锁 #自定义线程池 #生产者消费者模型(队列 ...

  6. 【数论】【原根】【动态规划】【bitset】2017四川省赛 K.2017 Revenge

    题意: 给你n(不超过200w)个数,和一个数r,问你有多少种方案,使得你取出某个子集,能够让它们的乘积 mod 2017等于r. 2017有5这个原根,可以使用离散对数(指标)的思想把乘法转化成加法 ...

  7. 【深度优先搜索】mr353-取奶

    应该是USACO的题目,暂时没有找到对应出处. [题目大意] 农夫约翰要量取 Q(1 <= Q <= 20,000)夸脱(夸脱,quarts,容积单位——译者注) 他的最好的牛奶,并把它装 ...

  8. Problem C: 矩阵对角线求和

    #include<stdio.h> int main() { ][]; scanf("%d",&n); ,sum2=; ;i<n;i++) ;j<n ...

  9. 域名做CDN来通过隐藏服务器真实IP的方法来防止DDoS攻击（转）

    隐藏服务器真实IP是解决问题最好和最快的方法,但只针对小流量,大流量同样会扛不住. 服务器前端加CDN中转,比如阿里云.百度云加速.360网站卫士.加速乐.安全宝等,如果资金充裕的话,可以购买高防的盾 ...

  10. jvm分析内存泄露

          首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 Java小组 工具资源 - 导航条 - 首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 Java小组 工具资源     ...