在没有浮动的情况下实现div模块的中间布局
DIV+CSS网页布局的最常见的形式:在左,右,下四个模块,760px宽度,整个页面。结构代码、左上、右足四个模块都是独立的、非嵌套的。
顶部
div左>
div id=left_module>左< / DIV >
< >
div>
div id=right_module>对< / DIV >
< >
脚>英尺
顶部属于常规定义。
#顶{身高:100px;背景:# CCC;宽度:760px;保证金:汽车;文本对齐:中心;}
方法一外左:定义为760px宽度和中心。内left_module被定义为实际280px左右宽度,和绝对位置等于上面定义的高度。
这种方法的优点是,左向右两个模块代码片段可以互换,以调整显示优先级。
#左{宽度:760px;保证金:汽车;}
# left_module {宽度:280px;位置:绝对;顶部:100px;padding: 10px;}
方法B:左外侧的定义为760px宽中,流动相对顶;内left_module被定义为实际280px左右宽度,和绝对定位。
这种方法的优点是可以自由扩展顶部高度。
#左{宽度:760px;保证金:汽车;位置:相对;}
# left_module {宽度:280px;位置:绝对;padding: 10px;}
外权界定为760px宽,中间,和内right_module被定义为实际的右右宽440px,使用边缘语法的左侧。right_module定义的背景颜色是实际右边的背景色,高度的定义是实际中模块的高度,和正确的背景颜色是实际左侧的背景颜色。
#右{宽度:760px;保证金:汽车;背景:# e8e8e8;}
# right_module {宽度:440px;背景:# f0f0f0;身高:360px;保证金:0汽车00;padding: 10px;}
底部也属于传统的定义。
#脚{身高:100px;背景:# CCC;宽度:760px;保证金:汽车;文本对齐:中心;}
测试环境和ff1.5 IE6.0,是最受欢迎的语法很简单,实用,可作为技术参考。