三栏宽度自适应布局及等高的思考_建站学-个人建站指南,网页制作,网站设计,网站制作教程

一. 实现三栏宽度自适应

第一种方法：

首先是一种不推荐的做法，用绝对定位实现。

实现要点：左栏left、右栏right设为绝对定位，分别设置width。左栏设置left和top，右栏设置right和top。自适应的中间栏设置为相对定位，设置margin:0 200px。

    
            01
            #left
        
            02
            { 
        
            03
                background-color: #E79F6D; 
        
            04
                width: 200px; 
        
            05
                position: absolute; 
        
            06
                left: 5px; 
        
            07
                top: 105px; 
        
            08
            } 
        
            09
            #center
        
            10
            { 
        
            11
                background-color: #D6D6D6; 
        
            12
                margin: 0 200px; 
        
            13
                top: 0px; 
        
            14
                position: relative; 
        
            15
            } 
        
            16
            #right
        
            17
            { 
        
            18
                background-color: #77BBDD; 
        
            19
                width: 200px; 
        
            20
                right: 5px; 
        
            21
                top: 105px; 
        
            22
                position: absolute; 
        
            23
            }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <mce:style type="text/css"></mce:style><style type="text/css" _mce_bogus="1"></style> </head> <body> <div id="main"> <div id="header"> <h2> header</h2> </div> <div id="left"> <div> 两海龟快活后，相约来年再相聚，第二年公龟来到见母龟已在等待，但母龟却大骂：你TMD爽完了也不把我翻过来，都一年了 </div> </div> <div id="center"> 中国人喜欢凑热闹是出名的，话说人行道上一位仁兄抬头望天，没过多久，越来越多的人聚拢在他的周围一起望天，最后把警察叔叔引来了，警察叔叔问，看什么呢？旁边的人回答：就是不知道看什么，所以在看呀！然后警察叔叔一层层的问进去，问到最先望天的仁兄：你看什么呢？仁兄回答道：出鼻血不可以啊？！读书时一直暗恋她，但没勇气表白，更没胆量碰她。毕业后，她已经结婚了，老公跟我是同学。那天下午，她抱着娃娃在喂奶，我找了个很好的借口。我走到她面前，一把两手按住她的MIMI，然后跟她娃娃说，喊叔叔，不喊不给吃! 波兰总统：我坠机了，郁闷啊。林彪回复：沙发，同楼主，悲剧。金正日跟贴：只坐火车的飘过，安全。张作霖跟帖：楼上sb。 </div> <div id="right"> 中国人喜欢凑热闹是出名的 </div> <div id="footer"> <h2> footer</h2> </div> </div> </body> </html>

这种绝对定位的做法比较死板，牵一发而动全身，而且如果非自适应的栏高度超过自适应的栏高度，并不能撑开底下的footer，谁叫他是绝对定位呢。

第二种方法：

用浮动实现。

实现要点：三栏均为float: left。中间栏设width为100%，设margin:0 -200px。margin-left和margin-right为-200px意味着原本应在的位置可以向左和向右再占200px（width仍然占着100%的宽度，只是不用换行去占这么大地了），则此时3栏位于同一行，且左栏与中间栏左侧重叠，右栏与中间栏右侧重叠。只要再将中间栏的数据左右往里各挤200px即可。所以中间栏中再加了个div，设其margin:0 200px即可。

    
            01
            #left
        
            02
            {             
        
            03
                width: 200px; 
        
            04
                float: left; 
        
            05
                background-color: #E79F6D; 
        
            06
            } 
        
            07
            #center
        
            08
            { 
        
            09
                margin: 0 -200px; 
        
            10
                width: 100%; 
        
            11
                float: left; 
        
            12
            } 
        
            13
            #center .inner 
        
            14
            { 
        
            15
                margin: 0 200px; 
        
            16
                background-color: #D6D6D6;             
        
            17
            } 
        
            18
            #right
        
            19
            {             
        
            20
                width: 200px; 
        
            21
                float: left; 
        
            22
                background-color: #77BBDD; 
        
            23
            }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <mce:style type="text/css"></mce:style><style type="text/css" _mce_bogus="1"></style> </head> <body> <div id="main" style="overflow: hidden;" _mce_style="overflow: hidden;"> <div id="header"> <h2> header</h2> </div> <div id="left"> 两海龟快活后，相约来年再相聚，第二年公龟来到见母龟已在等待，但母龟却大骂：你TMD爽完了也不把我翻过来，都一年了 </div> <div id="center"> <div class="inner "> 中国人喜欢凑热闹是出名的，话说人行道上一位仁兄抬头望天，没过多久，越来越多的人聚拢在他的周围一起望天，最后把警察叔叔引来了，警察叔叔问，看什么呢？旁边的人回答：就是不知道看什么，所以在看呀！然后警察叔叔一层层的问进去，问到最先望天的仁兄：你看什么呢？仁兄回答道：出鼻血不可以啊？！读书时一直暗恋她，但没勇气表白，更没胆量碰她。毕业后，她已经结婚了，老公跟我是同学。那天下午，她抱着娃娃在喂奶，我找了个很好的借口。我走到她面前，一把两手按住她的MIMI，然后跟她娃娃说，喊叔叔，不喊不给吃! 波兰总统：我坠机了，郁闷啊。林彪回复：沙发，同楼主，悲剧。金正日跟贴：只坐火车的飘过，安全。张作霖跟帖：楼上sb。 </div> </div> <div id="right"> 中国人喜欢凑热闹是出名的 </div> <div id="footer"> <h2> footer</h2> </div> </div> </body> </html>

第三种方法：

　　与第二种方法利用中间栏的margin实现不同，这里利用三栏外容器的padding实现。当然他们的中间栏都是100%的。

　　你可以去看一种备受推崇的圣杯布局，点击这里查看原文译文。下面代码与原文代码不完全一致，但思想是一致的，另外那篇文章的code有个IE7的BUG，我改了下hack。　　

　　实现要点：首先设置装着3栏的容器container的padding:0 150px 0 200px（ps:左栏width是200px，右栏width是150px）。由于中间栏是第一个DIV，且设了中间DIV的width:100%。则下面要做的就是：

1. 把左栏DIV放到container的padding-left的空白处：设margin-left: -100%（这个100%是container的width的100%，当然不包含padding），则往左移动了100%的距离，但仍然在padding-left空白处的右侧，所以再利用相对定位，使左移200px，即left:-200px（个人习惯这个），或者right:200px。

2. 把右栏DIV放到container的padding-right的空白处：同上，先使同行显示则设margin-left: -150px，再设right:-150px移动到正确位置。

    
            01
            #container 
        
            02
            { 
        
            03
                padding: 0 150px 0 200px; 
        
            04
            } 
        
            05
            #container .column 
        
            06
            { 
        
            07
                position: relative; 
        
            08
                float: left; 
        
            09
            } 
        
            10
            #center
        
            11
            { 
        
            12
                width: 100%; 
        
            13
            } 
        
            14
            #left
        
            15
            { 
        
            16
                width: 200px; 
        
            17
                left: -200px; 
        
            18
                margin-left: -100%; 
        
            19
            } 
        
            20
            #right
        
            21
            { 
        
            22
                width: 150px; 
        
            23
                margin-left: -150px; 
        
            24
                right: -150px; 
        
            25
            }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>The Holy Grail of Layouts: Example #1: A List Apart</title> <style type="text/css"> body { min-width: 550px; /* 2 x left width + right width */ } #container { padding: 0 150px 0 200px; } #container .column { position: relative; float: left; } #center { width: 100%; } #left { width: 200px; left: -200px; margin-left: -100%; } #right { width: 150px; margin-left: -150px; right: -150px; } #footer { clear: both; } /*IE6 7 Fix*/ #left { left:-200px; *left: 150px; /* RC width */ left:-200px\0; } /*Just for Looks*/ body { margin: 0; padding: 0; background: #FFF; } #header, #footer { font-size: large; text-align: center; padding: 0.3em 0; background: #999; } #left { background: #66F; } #center { background: #DDD; } #right { background: #F66; } #container .column { padding-top: 1em; text-align: justify; } </style> </head> <body> <div id="header"> This is the header.</div> <div id="container"> <div id="center" class="column"> <h1> This is the main content.</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> <div id="left" class="column"> <h2> This is the left sidebar.</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> <div id="right" class="column"> <h2> This is the right sidebar.</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> </div> <div id="footer"> This is the footer.</div> </body> </html>

第四种方法：

实现要点：这种方法其实和第二种相似，三栏均为float: left。中间栏设width为100%。由于中间栏是第一个DIV，故不需要设置它的margin负值使其位于第一行。此时左栏和右栏将换行显示。通过设置左栏的 margin-left: -100%;和右栏的margin-left: -150px;使三栏处于同一行显示。此时刚好处于合理位置故无需设为相对定位进行偏移，这一点不同于第三种方法。

注意：为了兼容IE6，container的zoom:1不可少，它是为了使元素支持haslayerout，常常IE6出现误差不兼容时，应先试下zoom:1是否可以解决。

    
            01
            .container 
        
            02
            { 
        
            03
                zoom: 1; 
        
            04
            } 
        
            05
            .column 
        
            06
            { 
        
            07
                float: left; 
        
            08
            } 
        
            09
            .center
        
            10
            { 
        
            11
                width: 100%; 
        
            12
                background: #D6D6D6; 
        
            13
            } 
        
            14
            .box 
        
            15
            { 
        
            16
                margin: 0 150px 0 200px; 
        
            17
            } 
        
            18
            .left
        
            19
            { 
        
            20
                margin-left: -100%; 
        
            21
                width: 200px; 
        
            22
                background: #E79F6D; 
        
            23
            } 
        
            24
            .right
        
            25
            { 
        
            26
                margin-left: -150px; 
        
            27
                width: 150px; 
        
            28
                background: #77BBDD; 
        
            29
            }

<!DOCTYPE html> <html> <head> <meta charset="gbk" /> <title>三列等高。中间列优先</title> <style type="text/css"> body, h2 { margin: 0; } body { min-width: 550px; } /* h2去除FF等body上面的空白*/#main { margin: 5px; } #header { height: 100px; background-color: gray; } #footer { height: 50px; background-color: gray; clear: both; } .container { zoom: 1; } .column { float: left; } .center { width: 100%; background: #D6D6D6; } .box { margin: 0 150px 0 200px; } .left { margin-left: -100%; width: 200px; background: #E79F6D; } .right { margin-left: -150px; width: 150px; background: #77BBDD; } </style> </head> <body> <div id="main"> <div id="header"> <h2> header</h2> </div> <div class="container"> <div class="center column"> <div class="box"> 中国人喜欢凑热闹是出名的，话说人行道上一位仁兄抬头望天，没过多久，越来越多的人聚拢在他的周围一起望天，最后把警察叔叔引来了，警察叔叔问，看什么呢？旁边的人回答：就是不知道看什么，所以在看呀！然后警察叔叔一层层的问进去，问到最先望天的仁兄：你看什么呢？仁兄回答道：出鼻血不可以啊？！读书时一直暗恋她，但没勇气表白，更没胆量碰她。毕业后，她已经结婚了，老公跟我是同学。那天下午，她抱着娃娃在喂奶，我找了个很好的借口。我走到她面前，一把两手按住她的MIMI，然后跟她娃娃说，喊叔叔，不喊不给吃! 波兰总统：我坠机了，郁闷啊。林彪回复：沙发，同楼主，悲剧。金正日跟贴：只坐火车的飘过，安全。张作霖跟帖：楼上sb。 </div> </div> <div class="left column"> 两海龟快活后，相约来年再相聚，第二年公龟来到见母龟已在等待，但母龟却大骂：你TMD爽完了也不把我翻过来，都一年了 </div> <div class="right column"> 中国人喜欢凑热闹是出名的 </div> </div> <div id="footer"> <h2> footer</h2> </div> </div> </body> </html>

二. 实现等高

　　个人觉得，其实很多网页设计是不需要等高的，通常可以用背景色搞定，或者很多背景色本来就是空白的。想想当border为1px的DIV等高了是多么丑吧。当然也有要用到等高的，如果css调不出来可以用上必杀招：JavaScript。这里讲的是用CSS实现等高。通常就是用margin-bottom负值和padding-bottom负值抵消来实现。

　　譬如说：上面第三张方法圣杯布局：只要在3栏外面容器加上overflow:hidden，然后分别给三栏加上：margin-bottom:-10000px;padding-bottom:10000px;即可。但是有个BUG：IE7不work，至于为什么我不知道，欢迎各位大大指教。如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>The Holy Grail of Layouts: Example #1: A List Apart</title> <style type="text/css"> body { min-width: 550px; /* 2 x left width + right width */ } #container { padding: 0 150px 0 200px; overflow:hidden; } #container .column { position: relative; float: left; margin-bottom:-10000px; padding-bottom:10000px; } #center { width: 100%; } #left { width: 200px; left: -200px; margin-left: -100%; } #right { width: 150px; margin-left: -150px; right: -150px; } #footer { clear: both; } /*IE6 7 Fix*/ #left { left:-200px; *left: 150px; /* RC width */ left:-200px\0; } /*Just for Looks*/ body { margin: 0; padding: 0; background: #FFF; } #header, #footer { font-size: large; text-align: center; padding: 0.3em 0; background: #999; } #left { background: #66F; } #center { background: #DDD; } #right { background: #F66; } #container .column { padding-top: 1em; text-align: justify; } </style> </head> <body> <div id="header"> This is the header.</div> <div id="container"> <div id="center" class="column"> <h1> This is the main content.</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> <div id="left" class="column"> <h2> This is the left sidebar.</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> <div id="right" class="column"> <h2> This is the right sidebar.</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> </div> <div id="footer"> This is the footer.</div> </body> </html>

　　对于第四种方法，使用同样的方法：

<!DOCTYPE html> <html> <head> <meta charset="gbk" /> <title>三列等高。中间列优先</title> <style type="text/css"> body, h2 { margin: 0; } body { min-width: 550px; } /* h2去除FF等body上面的空白*/ #main { margin: 5px; } #header { height: 100px; background-color: gray; } #footer { height: 50px; background-color: gray; clear: both; } .container { overflow: hidden; zoom: 1; } .column { float: left; padding-bottom: 10000px; margin-bottom: -10000px; } .center { width: 100%; background: #D6D6D6; } .box { margin: 0 150px 0 200px; } .left { margin-left: -100%; width: 200px; background: #E79F6D; } .right { margin-left: -150px; width: 150px; background: #77BBDD; } </style> </head> <body> <div id="main"> <div id="header"> <h2> header</h2> </div> <div class="container"> <div class="center column"> <div class="box"> 中国人喜欢凑热闹是出名的，话说人行道上一位仁兄抬头望天，没过多久，越来越多的人聚拢在他的周围一起望天，最后把警察叔叔引来了，警察叔叔问，看什么呢？旁边的人回答：就是不知道看什么，所以在看呀！然后警察叔叔一层层的问进去，问到最先望天的仁兄：你看什么呢？仁兄回答道：出鼻血不可以啊？！读书时一直暗恋她，但没勇气表白，更没胆量碰她。毕业后，她已经结婚了，老公跟我是同学。那天下午，她抱着娃娃在喂奶，我找了个很好的借口。我走到她面前，一把两手按住她的MIMI，然后跟她娃娃说，喊叔叔，不喊不给吃! 波兰总统：我坠机了，郁闷啊。林彪回复：沙发，同楼主，悲剧。金正日跟贴：只坐火车的飘过，安全。张作霖跟帖：楼上sb。 </div> </div> <div class="left column"> 两海龟快活后，相约来年再相聚，第二年公龟来到见母龟已在等待，但母龟却大骂：你TMD爽完了也不把我翻过来，都一年了 </div> <div class="right column"> 中国人喜欢凑热闹是出名的 </div> </div> <div id="footer"> <h2> footer</h2> </div> </div> </body> </html>

　　呃，就说这么多了。

(责任编辑：admin)

搜索

热门标签:

三栏宽度自适应布局及等高的思考