<!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. linux c 学习笔记

    gcc是linux c编译器 gcc -o o指定文件名或者会生成a.out文件 comment 注释 generate(生成) some simple ouput 使用标准 为C89

  2. android viewpager fragment 优化 切换界面 延时加载

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 使用 碎片的 设置用户可见暗示visible hint  这个方法来做到. hint 是 ...

  3. NOIP 2006 提高组 t1 能量项链

    题目描述 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子,前一颗珠子的尾标记一定 ...

  4. POJ 2484 A Funny Game 博弈论 对称博弈

    http://poj.org/problem?id=2484 1和2时Alice必胜,3时Bob必胜,其他情况下Bob只需要在Alice取过之后取一次将剩下的硬币链平均分为两份,然后Alice怎么取B ...

  5. poj 3464(Trie)Approximations

    Approximations Time Limit: 2000MS   Memory Limit: 131072K Total Submissions: 419   Accepted: 23 Desc ...

  6. Codeforces 804E The same permutation（构造）

    [题目链接] http://codeforces.com/contest/804/problem/E [题目大意] 给出一个1到n的排列,问每两个位置都进行一次交换最终排列不变是否可能, 如果可能输出 ...

  7. BZOJ 2242 [SDOI2011]计算器（快速幂+Exgcd+BSGS）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2242 [题目大意] 给出T和K 对于K=1,计算 Y^Z Mod P 的值 对于K=2 ...

  8. 【贪心】 Codeforces Round #419 (Div. 1) A. Karen and Game

    容易发现,删除的顺序不影响答案. 所以可以随便删. 如果行数大于列数,就先删列:否则先删行. #include<cstdio> #include<algorithm> usin ...

  9. 【Trie图+DP】BZOJ1030[JSOI2007]-文本生成器

    [题目大意] 给出单词总数和固定的文章长度M,求出至少包含其中一个单词的可能文章数量. [思路] 对于至少包含一个的类型,我们可以考虑补集.也就是等于[总的文章可能性总数-不包含任意一个单词的文章总数 ...

  10. 浙南联合训练赛 H - The number of positions

    Petr stands in line of n people, but he doesn't know exactly which position he occupies. He can say ...