在百分比布局中, 有时候会遇见一个头疼的问题,就是如果某个布局是正方形的话，我们在这种情况下考虑到适应各种媒体尺寸，又不能给它定固定的宽高。
之前遇见过纯色布局的结果我就用纯色图片代替实现的，现在有了这个方法，再也不用担心高度不等于宽度的问题了。
用这个方法的话无论你设置的宽度是%几，它的高度都和你的宽度相等
<!DOCTYPE HTML> <html> <head> <style> .father { width: 50%; /*改一下宽度试试看*/ } .daughter { width: 100%; height: 0; padding-top: 100%; background: #ff7500;; } </style> </head> <body> <div class = "father"> <div class = "daughter"></div> </div>