标签:
没等高布局之前:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .test{ width:300px; margin:0 auto;color:#fff; background:#ccc; } .left{ width:30%;float:left; background:green; } .right{ width:70%;float:left;background:red; } </style> </head> <body> <div class="test"> <div class="left">左</div> <div class="right">右<br>fdfd <br>hang <br>oooo</div> </div> </body> </html>
效果图:
登高布局之后:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .test{ width:300px; margin:0 auto;color:#fff; background:#ccc; overflow:hidden; } .left{ width:30%;float:left; background:green; padding-bottom:1000px; margin-bottom:-1000px; } .right{ width:70%;float:left;background:red; padding-bottom:1000px; margin-bottom:-1000px; } </style> </head> <body> <div class="test"> <div class="left">左</div> <div class="right">右<br>fdfd <br>hang <br>oooo</div> </div> </body> </html>
效果:
总结:padding值可以被负的margin抵消掉;
标签:
原文地址:http://www.cnblogs.com/lichaoqing/p/5674113.html