CSS+DIV布局，一个列宽影响另一个列宽，使总宽度自适应（CSS+DIVLayout,onecolumn'swidthdependontheother's）_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS+DIV布局，一个列宽影响另一个列宽，使总宽度自适应（CSS+DIVLayout,onecolumn'swidthdependontheother's）_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3954字，纯文字阅读大概需要6分钟。

内容图文

内容列宽度+导航列宽==固定值（总宽度）

但是，内容列宽度 和 导航列宽 都没有一个定值，而网上的大多自适应列宽代码都是基于一个定值的

无奈，我写Winform出身的对CSS+DIV知之甚少，只能通过JavaScript来完成了，效果还可以，IE7.0和Firefox2.0测试通过

下面的代码中，导航列没有定义宽度，其实际宽度要靠里面的内容而确定：

效果图，右边为导航列（不习惯吧，呵呵，客户阿拉伯的）：

< html >
< head >
< title ></ title >
< script type ="text/javascript" >
window.onload = function (){
document.getElementById( " left " ).style.width = ( 773 - (document.getElementById( " right " ).clientWidth)) + " px " ;
}
</ script >
< style type ="text/css" >
body
{
background : #999 ;
text-align : center ;
color : #333 ;
font-family : Verdana, Arial, Helvetica, sans-serif ;
margin : 0px ;
}
#header
{
margin-right : auto ;
margin-left : auto ;
padding : 0px ;
width : 776px ;
background : #EEE ;
height : 60px ;
text-align : left ;
}
#contain
{
margin-left : auto ;
margin-right : auto ;
width : 776px ;
}
#mainbg
{
float : left ;
padding : 0px ;
width : 776px ;
background : #60A179 ;
}
#right
{
float : right ;
margin : 2px 0px 2px 0px ;
padding : 0px ;
background : #ccd2de ;
min-height : 300px ;
_height : 300px ;
text-align : left ;
}
#left
{
float : right ;
margin : 2px 2px 0px 0px ;
padding : 0px ;
background : #F2F3F7 ;
width : 574px ;
min-height : 600px ;
_height : 600px ;
text-align : left ;
}
#footer
{
clear : both ;
margin-right : auto ;
margin-left : auto ;
padding : 0px ;
width : 776px ;
background : #EEE ;
height : 60px ;
}
.text
{
margin : 0px ;
padding : 20px ;
}
</ style >
</ head >
< body >
< div id ="header" >
header with height of 60px
</ div >
< div id ="contain" >
< div id ="mainbg" >
< div id ="right" >
< div class ="text" >
< p >
put your tree here </ p >
</ div >
</ div >
< div id ="left" >
< div class ="text" >
the width of this div is dependent on the right div
left < br />
left < br />
left < br />
left < br />

</ div >
</ div >
</ div >
</ div >
< div id ="footer" >
footer
</ div >
</ body >
</ html >

另外，修改之前的原始代码是我收藏的，好像网上copy很多，也不知道哪里才是原始出处了，尽管做了扩充和修改，但还是应该注明一下，如是您是原作者，请联系我blodfox777@hotmal.com

内容总结

以上是互联网集市为您收集整理的CSS+DIV布局，一个列宽影响另一个列宽，使总宽度自适应（CSS+DIVLayout,onecolumn'swidthdependontheother's）_html/css_WEB-ITnose全部内容，希望文章能够帮你解决CSS+DIV布局，一个列宽影响另一个列宽，使总宽度自适应（CSS+DIVLayout,onecolumn'swidthdependontheother's）_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端