DIV+CSS三栏布局
时间：2006-08-11 来源：nothing9
在《一个三栏布局(1)》中讲到了一个三栏布局，里面使用了JS脚本的方法来达到栏目自适应高度，缺点很明显，当浏览器禁用脚本的时候，布局就会变得混乱，特别是当左边栏或右边栏的高度小于中间栏的时候。下面来看一种不使用脚本的方法，还是按原来的要求，不过得对HTML代码做一下修改： ----------------------------------------------------- <html><head> <link rel="stylesheet" rev="stylesheet" href="test.css" type="text/css" media="all"> </head> <body>
top
midpart
leftpart
rightpart
bottom </body></html> ----------------------------------------------------- 这里是将中间栏跟左边栏放到了一个层里，这样总的结构就变成了是二栏了，然后再中左边里分出二栏。这样就可以不使用绝对定位了，也能使用负边界来解决栏目的高度自适应问题。来看下CSS样式部分： ----------------------------------------------------- body,html{ font-family:Arial; font-size:12px; background-color:#FFFFFF; text-align: center; } *{ margin:0; padding:0; } #top,#bottom{ width:770px; background-color:#0099FF; margin:0 auto; clear:both; } #main{ width:770px; margin-right: auto; margin-left: auto; padding: 0px; color: black; overflow:hidden; } #nojs{ width:570px; float:left; } #leftpart{ width:200px; float:left; background-color:#999900; padding-bottom: 32767px; margin-bottom: -32767px; } #midpart{ width:370px; background-color:#00CC99; margin-right: auto; margin-left: auto; float:right; padding-bottom: 32767px; margin-bottom: -32767px; } #rightpart{ width:200px; float:right; background-color:#FF9900; padding-bottom: 32767px; margin-bottom: -32767px; } ----------------------------------------------------- 使用负边界的方法来实现栏目的自适应高度，不过这里就不然需要JS脚本了。 相关阅读 更多 +
