三行两列左右列自适应高度的圆角布局

左右列自适应高度的布局应用很广泛, 不使用脚本纯CSS实现的话, 一般是给内容区内边距设一个很大的值, 把左右列撑开, 然后给外边距也设一个同样大小的负值, 最后把父容器溢出隐藏就可以了, 有边框的需求的话, 还要在父容器后面加一个相同结构的底边.

如果要求边框为圆角的话其实也很简单, 用九宫格或者滑动门做一个圆角框往里面填即可, 现在我们用九宫格来实现…

先重置一下默认样式

Reset

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin : 0 ; padding : 0 ; }
body,button,input,select,textarea { font : 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif ; }
h1,h2,h3,h4,h5,h6 { font-size : 100% ; }
address,cite,dfn,em,var { font-style : normal ; }
code,kbd,pre,samp { font-family : courier new, courier, monospace ; }
small { font-size : 12px ; }
ul,ol { list-style : none ; }
a { text-decoration : none ; }
a:hover { text-decoration : underline ; }
sup { vertical-align : text-top ; }
sub { vertical-align : text-bottom ; }
legend { color : #000 ; }
fieldset,img { border : 0 ; }
button,input,select,textarea { font-size : 100% ; }
table { border-collapse : collapse ; border-spacing : 0 ; }

准备一个960宽度24栅格的环境

Grid Systems

html { height : 100% ; }
body { height : 100% ; border : 0 ; position : relative ; font-family : simsun ; }
/* 24栅格 */
.c24 { width : 960px ; overflow : hidden ; _zoom : 1 ; position : relative ; margin-left : auto ; margin-right : auto ; background : url(24_col.gif) repeat-y ; }
.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12,.g13,.g14,.g15,.g16,.g17,.g18,.g19,.g20,.g21,.g22,.g23,
.g24 { overflow : hidden ; _zoom : 1 ; display : inline ; float : left ; margin-left : 5px ; margin-right : 5px ; }
.g1 { width : 30px ; }
.g2 { width : 70px ; }
.g3 { width : 110px ; }
.g4 { width : 150px ; }
.g5 { width : 190px ; }
.g6 { width : 230px ; }
.g7 { width : 270px ; }
.g8 { width : 310px ; }
.g9 { width : 350px ; }
.g10 { width : 390px ; }
.g11 { width : 430px ; }
.g12 { width : 470px ; }
.g13 { width : 510px ; }
.g14 { width : 550px ; }
.g15 { width : 590px ; }
.g16 { width : 630px ; }
.g17 { width : 670px ; }
.g18 { width : 710px ; }
.g19 { width : 750px ; }
.g20 { width : 790px ; }
.g21 { width : 830px ; }
.g22 { width : 870px ; }
.g23 { width : 910px ; }
.g24 { width : 950px ; }

HTML

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
2   < html xmlns ="http://www.w3.org/1999/xhtml" >
3   < head runat ="server" >
4   < title ></ title >
5   < link rel ="stylesheet" href ="common.css" />
6   < style type ="text/css" >
7 .head,.foot { width : 950px ; height : 100px ; overflow : hidden ; margin : 5px auto ; background : #DDD ; }
8   </ style >
9   </ head >
10   < body >
11 < div class ="head" ></ div >
12 < div class ="c24" >
13 < p style ="height:400px;" ></ p >
14 </ div >
15 < div class ="foot" ></ div >
16   </ body >
17   </ html >

九宫格其实就是三行三列九个格子, 这里div标签为行, p标签为列

CSS

1 .box { position : relative ; }
2 .box .b1,.box .b2,.box .b3 { position : relative ; }
3 .box .b2 { overflow : hidden ; _zoom : 1 ; padding-left : 10px ; padding-right : 10px ; }
4 .box .b1,.box .b3 { height : 10px ; overflow : hidden ; _zoom : 1 ; padding-left : 10px ; padding-right : 10px ; }
5 .box .p1,.box .p2 { width : 10px ; overflow : hidden ; position : absolute ; top : 0 ; margin-bottom : -32767px ; padding-bottom : 32767px ; }
6 .box .p1 { left : 0 ; }
7 .box .p2 { right : 0 ; }
8 .box .p3 { height : 100% ; }
9 .b1 .p1 { background : #BD212F ; }
10 .b1 .p2 { background : #BD212F ; }
11 .b1 .p3 { background : #CFC ; }
12 .b2 .p1 { background : #CFC ; }
13 .b2 .p2 { background : #CFC ; }
14 .b3 .p1 { background : #BD212F ; }
15 .b3 .p2 { background : #BD212F ; }
16 .b3 .p3 { background : #CFC ; }

HTML

1 < div class ="box" >
2 < div class ="b1" >< p class ="p1" > 1 </ p >< p class ="p2" ></ p >< p class ="p3" ></ p ></ div >
3 < div class ="b2" >
4
5 < p class ="p1" ></ p >< p class ="p2" ></ p >
6 </ div >
7 < div class ="b3" >< p class ="p1" ></ p >< p class ="p2" ></ p >< p class ="p3" ></ p ></ div >
8   </ div >

定义一个.box父容器(设置position:relative;避免IE6下定位的元素会超出父容器的范围) , 里面包含3个div标签8个p标签, 这就是一个基本单元, 将每个块(.b1,.b2,.b3)里面的左右部分(.p1,.p2)相对定位到块的左边和右边用来做圆角框的四个角和垂直的两个边框, 上下边框则由.p3搞定.

需要注意的是IE6下不设宽高的块级元素有时候没法撑开, 因此用_zoom:1;来修补这个bug.中间部分(.b2)的两个垂直边(.p,.p2)需要适应内容高度延展, 此情况下还是用老办法margin-bottom:-32767px; padding-bottom:32767px;来解决, 因为整型正数最大值为32767, 采用这个最大值来保证边框的延展性和浏览器兼容性.

至此我们的九宫格就已经可以自适应父容器的宽度和内容的高度了, 用相应的圆角图片代替4角和4边就可以了. 下面我们吧三行两列的布局和圆角框融合.

CSS

1 .auto { margin-bottom : -32767px ; padding-bottom : 32767px ; }

HTML

< div class ="head" >
< div class ="box" >
< div class ="b1" >< p class ="p1" > 1 </ p >< p class ="p2" ></ p >< p class ="p3" ></ p ></ div >
< div class ="b2" >
< pre >
123
123 </ pre >
< p class ="p1" ></ p >< p class ="p2" ></ p >
</ div >
< div class ="b3" >< p class ="p1" ></ p >< p class ="p2" ></ p >< p class ="p3" ></ p ></ div >
</ div >
</ div >
< div class ="c24" >
< div class ="g17 box auto" >
< div class ="b1" >< p class ="p1" ></ p >< p class ="p2" ></ p >< p class ="p3" ></ p ></ div >
< div class ="b2 auto" >
< p style ="height:300px; margin:10px; background:#DDD;" > 右边内容高度300px,外边距10px. </ p >
< p class ="p1" ></ p >< p class ="p2" ></ p >
</ div >
</ div >
< div class ="g7 box auto" >
< div class ="b1" >< p class ="p1" ></ p >< p class ="p2" ></ p >< p class ="p3" ></ p ></ div >
< div class ="b2 auto" >
< p style ="height:100px; background:#DDD;" > 左边内容高度100px </ p >
< p class ="p1" ></ p >< p class ="p2" ></ p >
</ div >
</ div >
</ div >
< div class ="c24" >
< div class ="g17 box" >
< div class ="b3" >< p class ="p1" ></ p >< p class ="p2" ></ p >< p class ="p3" ></ p ></ div >
</ div >
< div class ="g7 box" >
< div class ="b3" >< p class ="p1" ></ p >< p class ="p2" ></ p >< p class ="p3" ></ p ></ div >
</ div >
</ div >
< div class ="foot" ></ div >

从效果图中可以看到左边圆角框(.g17)占17个栅格, 内容高度为400像素外边距10像素, 而右边圆角框(.g7)占7个栅格高度为100像素, 右边自适应了左边的高度,事实上左边高了右边就会适应左边的高度, 右边高了左边也会适应右边的高度, 此布局兼容IE6 IE7 IE8 Firefox Opera Chrome 感兴趣的可以自己测了^^

转载于:https://www.cnblogs.com/cyfin/archive/2011/04/02/2002782.html