<!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>