当前位置:Gxlcms > html代码 > 二列div宽度自适应_html/css_WEB-ITnose

二列div宽度自适应_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:7人阅读

二列div宽度自适应:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
在之前的教程已经介绍了一列div宽度自适应。实现自适应效果的主要手段就是设置对象的width属性值为百分数。
代码实例:

    蚂蚁部落 
我是左边
我是右边

以上代码通过使用百分数设置两个并列div的宽度,达到二列div宽度自适应。在以上代码设置的效果中,无论如何调整窗口的大小,两个div各自占据着窗口30%和70%的宽度。
以上的代码在实际使用中往往存在问题。例如:

    蚂蚁部落 
我是左边
我是右边

运行上面的代码可以看到,两个div换行了。这是因为对象实际占用的宽度并不仅仅是由width属性所决定的,还有外边距、边框宽度和内边距会影响一个对象的实际占用的宽度。所以当以上代码中两个div的宽度30%和70%之和正好为一个窗口宽度时候,再加上边框的宽度就超出了窗口的宽度,于是导致换行。点击查看盒模型会有助于以上代码的理解。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4768

更多内容可以参阅:http://www.softwhy.com/divcss/

人气教程排行