三列等高CSS布局的一个实例, 修改国外的一个demo, 兼容到了IE5.5 和标准的浏览器OperaFirefoxSafari。 不过hack太多,不是很喜欢这样做。 全部代码如下:
<?xmlversion="1.0"encoding="gb2312"?> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <metahttp-equiv="Content-Language"content="zh-CN"/> <metacontent="all"name="robots"/> <title>3columnlauput</title> <styletype="text/css"media="screen"> <!-- /*<![CDATA[*/ /*----------------------------------------------------------- @from:http://www.alistapart.com/articles/holygrail @modify:greengnn08-01-02 ------------------------------------------------------------*/ *{ margin:0; padding:0; } body{ min-width:550px; font:normalnormalnormal75%/1.25emVerdana,Arial,Helvetica,sans-serif; color:#333333; text-align:left; } /*layout*/ #container{ padding-left:200px; padding-right:150px; background:#000; zoom:1; } #container:after{ content:'.'; display:block; height:0; clear:both; visibility:hidden; } #container{display:inline-block;} /*\*/ #container{display:block;} /*\*/ #center,#left,#right{ position:relative; float:left; } * html#center{ } #center{width:100%;} #left{ width:200px; right:200px; margin-left:-100%; } #right{ width:150px; margin-right:-150px; } #footer{clear:both;} /*Equal-height*/ #container{overflow:hidden;} #footer{ overflow:hidden; position:relative; } /*IE7hack*/ * html#center{ position:static; } * html#left{ position:static; } * html#right{ position:static; } * html#container{ position:relative; overflow:hidden; } * html#left{ position:relative; } /*EndIE7hack*/ /*StartHackforOpera8*/ /*\*/ #container#center,#container#left,#container#right{ padding-bottom:32767px!important; margin-bottom:-32767px!important; } @mediaalland(min-width:0px){ #container#center,#container#left,#container#right{ padding-bottom:0!important; margin-bottom:0!important; } #center:before,#left:before,#right:before{ content:'[DONOTLEAVEITISNOTREAL]'; display:block; background:inherit; padding-top:32767px!important; margin-bottom:-32767px!important; height:0; } } /**/ /*EndHackforOpera8*/ /*justtosee*/ #header,#footer{ font-size:40px; line-height:40px; text-align:center; font-weight:bold; color:#cccccc; background:#666666; } #center{background:#eeeeee;} #left{background:#FF9933;} #right{background:#0099CC;} /*]]>*/ --> </style> </head> <body> <divid="header">header(testinIE5.5 opera9.0Firefox2.0)</div> <divid="container"> <divid="center"> <h2>Abstract</h2> <p>Thewebisconstantlyevolving.Newandinnovativewebsitesarebeingcreatedeveryday,pushingtheboundariesofHTMLineverydirection.HTML4hasbeenaroundfornearlyadecadenow,andpublishersseekingnewtechniquestoprovideenhancedfunctionalityarebeingheldbackbytheconstraintsofthelanguageandbrowsers.</p> <p>Togiveauthorsmoreflexibilityandinteroperability,andenablemoreinteractiveandexcitingwebsitesandapplications,HTML5introducesandenhancesawiderangeoffeaturesincludingformcontrols,APIs,multimedia,structure,andsemantics.</p> <p>WorkonHTML5,whichcommencedin2004,iscurrentlybeingcarriedoutinajointeffortbetweenthe<ahref="http://www.w3.org/html/"><abbrtitle="W3CHTMLWorkingGroup">W3CHTMLWG</abbr></a>andthe<ahref="http://www.whatwg.org/"><abbrtitle="WebHypertextApplicationTechnologyWorkingGroup">WHATWG</abbr></a>.ManykeyplayersareparticipatingintheW3Ceffortincludingrepresentativesfromthefourmajorbrowservendors:Apple,Mozilla,Opera,andMicrosoft;andarangeofotherorganisationsandindividualswithmanydiverseinterestsandexpertise.</p> <p>Notethat<ahref="http://www.w3.org/html/wg/html5/">thespecification</a>isstilla<em>workinprogress</em>andquitealongwayfromcompletion.Assuch,itispossiblethatanyfeaturediscussedinthisarticlemaychangeinthefuture.Thisarticleisintendedtoprovideabriefintroductiontosomeofthemajorfeaturesastheyareinthecurrentdraft.</p> </div> <divid="left"> <h2>Abstract</h2> <p>Thewebisconstantlyevolving.Newandinnovativewebsitesarebeingcreatedeveryday,pushingtheboundariesofHTMLineverydirection.HTML4hasbeenaroundfornearlyadecadenow,andpublishersseekingnewtechniquestoprovideenhancedfunctionalityarebeingheldbackbytheconstraintsofthelanguageandbrowsers.</p> <p>Togiveauthorsmoreflexibilityandinteroperability,andenablemoreinteractiveandexcitingwebsitesandapplications,HTML5introducesandenhancesawiderangeoffeaturesincludingformcontrols,APIs,multimedia,structure,andsemantics.</p> <p>WorkonHTML5,whichcommencedin2004,iscurrentlybeingcarriedoutinajointeffortbetweenthe<ahref="http://www.w3.org/html/"><abbrtitle="W3CHTMLWorkingGroup">W3CHTMLWG</abbr></a>andthe<ahref="http://www.whatwg.org/"><abbrtitle="WebHypertextApplicationTechnologyWorkingGroup">WHATWG</abbr></a>.ManykeyplayersareparticipatingintheW3Ceffortincludingrepresentativesfromthefourmajorbrowservendors:Apple,Mozilla,Opera,andMicrosoft;andarangeofotherorganisationsandindividualswithmanydiverseinterestsandexpertise.</p> <p>Notethat<ahref="http://www.w3.org/html/wg/html5/">thespecification</a>isstilla<em>workinprogress</em>andquitealongwayfromcompletion.Assuch,itispossiblethatanyfeaturediscussedinthisarticlemaychangeinthefuture.Thisarticleisintendedtoprovideabriefintroductiontosomeofthemajorfeaturesastheyareinthecurrentdraft.</p> </div> <divid="right"> <h2>Abstract</h2> <p>Thewebisconstantlyevolving.Newandinnovativewebsitesarebeingcreatedeveryday,pushingtheboundariesofHTMLineverydirection.HTML4hasbeenaroundfornearlyadecadenow,andpublishersseekingnewtechniquestoprovideenhancedfunctionalityarebeingheldbackbytheconstraintsofthelanguageandbrowsers.</p> <p>Togiveauthorsmoreflexibilityandinteroperability,andenablemoreinteractiveandexcitingwebsitesandapplications,HTML5introducesandenhancesawiderangeoffeaturesincludingformcontrols,APIs,multimedia,structure,andsemantics.</p> <p>WorkonHTML5,whichcommencedin2004,iscurrentlybeingcarriedoutinajointeffortbetweenthe<ahref="http://www.w3.org/html/"><abbrtitle="W3CHTMLWorkingGroup">W3CHTMLWG</abbr></a>andthe<ahref="http://www.whatwg.org/"><abbrtitle="WebHypertextApplicationTechnologyWorkingGroup">WHATWG</abbr></a>.ManykeyplayersareparticipatingintheW3Ceffortincludingrepresentativesfromthefourmajorbrowservendors:Apple,Mozilla,Opera,andMicrosoft;andarangeofotherorganisationsandindividualswithmanydiverseinterestsandexpertise.</p> <p>Notethat<ahref="http://www.w3.org/html/wg/html5/">thespecification</a>isstilla<em>workinprogress</em>andquitealongwayfromcompletion.Assuch,itispossiblethatanyfeaturediscussedinthisarticlemaychangeinthefuture.Thisarticleisintendedtoprovideabriefintroductiontosomeofthemajorfeaturesastheyareinthecurrentdraft.</p> </div> </div> <divid="footer">footer</div> <scriptsrc="http://www.google-analytics.com/urchin.js"type="text/javascript"></script> <scripttype="text/javascript"> /*<![CDATA[*/ _uacct="UA-496414-1"; /*]]>*/ </script> </body> </html>
查看运行效果:
[ 可先修改部分代码 再运行查看效果 ]