标签：
二列div宽度自适应:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
在之前的教程已经介绍了一列div宽度自适应。实现自适应效果的主要手段就是设置对象的width属性值为百分数。
代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .left{ width:30%; height:50px; background-color:green; float:left; } .right{ width:70%; height:50px; background-color:blue; float:left; } </style> </head> <body> <div class="left">我是左边</div> <div class="right">我是右边</div> </body> </html>
以上代码通过使用百分数设置两个并列div的宽度，达到二列div宽度自适应。在以上代码设置的效果中，无论如何调整窗口的大小，两个div各自占据着窗口30%和70%的宽度。
以上的代码在实际使用中往往存在问题。例如:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .left{ width:30%; height:50px; background-color:green; float:left; } .right{ width:70%; height:50px; background-color:blue; float:left; } </style> </head> <body> <div class="left">我是左边</div> <div class="right">我是右边</div> </body> </html>
运行上面的代码可以看到，两个div换行了。这是因为对象实际占用的宽度并不仅仅是由width属性所决定的，还有外边距、边框宽度和内边距会影响一个对象的实际占用的宽度。所以当以上代码中两个div的宽度30%和70%之和正好为一个窗口宽度时候，再加上边框的宽度就超出了窗口的宽度，于是导致换行。点击查看盒模型会有助于以上代码的理解。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4768
更多内容可以参阅:http://www.softwhy.com/divcss/
标签：
原文地址：http://www.cnblogs.com/softwhy/p/5077542.html
