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

大中小文章来源：中国互联更新时间：2011-8-18 14:30:33

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

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

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三列自适应等高且中列宽度自适应 - www.webjx.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.webjx.com</a></div> <div class="right row"> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> </div> <div class="center row"> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <a href="http://www.webjx.com/">www.webjx.com</a><br /> <span style="float:right; position:relative;"> </span>  </div> </div> </body> </html>

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

版权说明:本站原创文章,由中国互联 SEO优化发表.
本文地址:https://www.hulian.top/zixun/post/4088.html

分享到：QQ空间新浪微博腾讯微博微信百度贴吧百度空间搜狐微博

在线咨询

客服咨询
企业qq交谈
QQ：800009888

备案专员
企业qq交谈
QQ：973907313

域名专员
企业qq交谈
QQ：6584830

在线时间
8:00-21:00

域名注册查询

域名注册

虚拟主机

云服务器

上海网站建设

微信小程序

企业邮箱

网络营销

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

相关文章：