<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>padding-bottom布局</title>

     <style>

         #q{width:800px; height:700px; background:#f45;}

         #c{width:400px; height:350px; padding-bottom:50%; background:#00f}

         .out{width:100%;height:300px;background:#f45;}

         .a,.b{width:50%;background:#00f;padding-bottom: 10%;

             float: left;}

     </style>

 </head>

 <body>

 <div id="q">

     <div id="c">

         SKJFLDKLKSAL;

     </div>

 </div>

 <!--  padding-bottom的百分比的值是按照父元素宽度的值计算的 #q的宽度为800,c的padding-bottom值为50%;浏览器

 解析后的值为400px;

 一般的用法是父元素设置一个宽度，子元素设置自己的padding-bottom按百分比，

 这种布局方法适用于这样一个情景；一个元素的背景需要全部显示出来，并且比例不变；随着屏幕大小变化；

 要求本元素不会变形始终维持一个比例；通俗的讲就是让一个元素铺上背景，达到图片的显示效果;

 1、一个元素的宽度值是父元素宽度值的百分比；

 2、此元素通过设置padding-bottom的百分比，使其达到本元素的高度，按照父元素的宽度的值来计算；

 -->

 <script src="http://libs.useso.com/js/jquery/1.8.3/jquery.js"></script>

 <script>

 </script>

 </body>

 </html>

padding-bottom布局解析；的更多相关文章

  1. xml布局解析报错的可能原因

    xml布局解析报如下的错11-15 16:55:21.425 17633-17633/com.hongfans.mobileconnect I/LogUtils_info: [CrashHandler ...

  2. 从LayoutInflater分析XML布局解析成View的树形结构的过程

    上一篇博客分析了XML布局怎么载入到Activity上.不了解的能够參考 从setContentView方法分析Android载入布局流程 上一篇博客仅仅是分析了怎么讲XML布局加入到 Activit ...

  3. bootstrap-----流体布局解析

    流体布局容器 容器的width为auto,只是两边加了15px的padding. 流体布局容器 容器的width为auto,只是两边加了15px的padding. <div class=&quo ...

  4. MVC视图展现模式之移动布局解析-续集

    网站就必须用响应式布局吗?MVC视图展现模式之移动布局:http://www.cnblogs.com/dunitian/p/5213787.html demo:http://pan.baidu.com ...

  5. Android布局解析，图文(转)

    LinearLayout:相当于Java GUI中的FlowLayout(流式布局),就是说一个组件后边跟一个,挨着靠,一个组件把一行占满了,就靠到下一行. linearlayoutdemo.xml ...

  6. bootsrap-----固定布局解析

    <div class="container"> container </div> .container { .container-fixed();容器的wi ...

  7. Flutter 布局（二）- Padding、Align、Center详解

    本文主要介绍Flutter布局中的Padding.Align以及Center控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Padding A widget that insets ...

  8. H5移动前端完美布局之padding

    序上次的提到了H5移动前端完美布局之-margin百分比的使用margin-top(left,right,bottom)的百分比在移动页面布局中对上下左右距离的处理,攻下城外再攘城内,今天看看padd ...

  9. Android自定义ViewGroup（四、打造自己的布局容器）

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/51500304 本文出自:[openXu的博客] 目录: 简单实现水平排列效果 自定义Layo ...

随机推荐

  1. MySQL----基本数据类型

    1.数值型: tinyint:1字节 smallint:2字节 mediumint:3字节 int:4字节 bigint:8字节 float:4字节 double:8字节 decimal(m,c):m ...

  2. 一种基于Qt的可伸缩的全异步C/S架构服务器实现（流浪小狗，六篇，附下载地址）

    本文向大家介绍一种基于Qt的伸缩TCP服务实现.该实现针对C/S客户端-服务集群应用需求而搭建.连接监听.数据传输.数据处理均在独立的线程池中进行,根据特定任务不同,可安排负责监听.传输.处理的线程数 ...

  3. poj1316

    Self Numbers Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 20864   Accepted: 11709 De ...

  4. aix puppet agent

    demo控制脚本tel,150 5519 8367 Running Puppet on AIX Puppet on AIX is… not officially supported, yet stil ...

  5. Soft Drinking(水)

    A. Soft Drinking time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  6. android-vlc for rtsp build OK

    近期研究 rtsp http stream 流获取方式 vlc over live555  是个很不错的选择,当然了 andorid framework av也是支持rtsp http的,相同不错的选 ...

  7. JavaScript可以这样用

    javascript:Qrlink(<%#Eval("ActivityType")%>,<%#Eval("ID")%>,<%#Ev ...

  8. clientX,pageX,screenX，offsetLeft，scrollTop

    出处:点击打开链接 一直不太明白,今天看了一下,感觉挺详细,先转载过来....... clientX 观点:鼠标相对于WINDOWS的坐标. 这里这个WINDOWS是指我们能看见的浏览器大小.所以不可 ...

  9. 如何启用Oracle EBS Form监控【Z】

    前言: 有时候,因某些需要,必须知道Oracle的Form被使用的情况,以方面我们做出决策: 例如,如果某个Form被使用的次数非常多,那么,这个Form的相关SQL代码就应该优先处理,以减少服务器负 ...

  10. c++中类模版中的static数据成员的定义

    这个有点绕. 如下: template <typename T> class A{ ......... static std::allocate<T> alloc_; }; t ...