当前位置： > 网页特效 > 浏览器 > 文章内容

网页三列自适应等高且中列宽度自适应

http://www.itjxue.com 2015-08-05 00:31 来源:未知 点击次数:

　　网页三列自适应等高且中列宽度自适应的CSS布局实例，作者silence应用了很多HACK进行代码编写。

　　IE6是主要出现问题的浏览器，希望在以后的发展中，IE6与标准不再协调的事情不要再次发生。我们看代码：

<!DOCTYPE <a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a> 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三列自适应等高且中列宽度自适应 - www.itjxue.com</title> <style type="text/css"> a{ color:#30C;} .wrap{overflow:hidden;} .left{width:250px;float:left; background:#FC9;} .right{width:250px;float:right;background:#FC9;} .center{ background:#FC0;_float:left;/* ie6 hack*/ overflow:hidden;} .row{margin-bottom:-10000px;padding-bottom:10000px;} </style> </head> <body> <div class="wrap"> <div class="left row"><a href="#">www.itjxue.com</a></div> <div class="right row"> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> </div> <div class="center row"> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <a href="http://www.itjxue.com/">www.itjxue.com</a><br /> <span style="float:right; position:relative;"> </span>  </div> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：用链接控制页面小窗口的打开和关闭

下一篇：使用CSS定位的网页footer

网页三列自适应等高且中列宽度自适应

(责任编辑：IT教学网)

相关浏览器文章

阅读排行

专题教程

推荐浏览器文章

最新更新浏览器