Home > Article > Web Front-end > 二列div宽度自适应_html/css_WEB-ITnose
二列div宽度自适应_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:231206browse
二列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/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：你对position的了解到底有多少？_html/css_WEB-ITnoseNext article：CSS如何设置选中文本的颜色_html/css_WEB-ITnose