padding-bottom布局解析；

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>padding-bottom布局</title>
 6     <style>
 7         #q{width:800px; height:700px; background:#f45;}
 8         #c{width:400px; height:350px; padding-bottom:50%; background:#00f}
 9         .out{width:100%;height:300px;background:#f45;}
10         .a,.b{width:50%;background:#00f;padding-bottom: 10%;
11             float: left;}
12 
13     </style>
14 </head>
15 <body>
16 <div id="q">
17     <div id="c">
18         SKJFLDKLKSAL;
19     </div>
20 </div>
21 
22 <!--  padding-bottom的百分比的值是按照父元素宽度的值计算的 #q的宽度为800,c的padding-bottom值为50%;浏览器
23 解析后的值为400px;
24 一般的用法是父元素设置一个宽度，子元素设置自己的padding-bottom按百分比，
25 这种布局方法适用于这样一个情景；一个元素的背景需要全部显示出来，并且比例不变；随着屏幕大小变化；
26 要求本元素不会变形始终维持一个比例；通俗的讲就是让一个元素铺上背景，达到图片的显示效果;
27 1、一个元素的宽度值是父元素宽度值的百分比；
28 2、此元素通过设置padding-bottom的百分比，使其达到本元素的高度，按照父元素的宽度的值来计算；
29 -->
30 <script src="http://libs.useso.com/js/jquery/1.8.3/jquery.js"></script>
31 <script>
32 
33 </script>
34 </body>
35 </html>
坚持下去就能成功