三列等高布局

fuhao200866 · 发表于 2013-2-7 16:02:32

最近在一次项目中，需要用到等高布局，如果采用background的等高方法，代码会比较繁琐，而JS会影响页面的加载效率，于是采用了“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法来做。
看下HTML：
<!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>三列等高布局</title><style type="text/css">* { margin:0; padding:0}.pub-height { margin-bottom:-10000px; padding-bottom:10000px;}.float-left { float:left}.wrapper { overflow:hidden;}.header { height:200px; background:#ccc;}.left { background:#00f; width:200px;}.content { background:#0f0; width:300px;}.right { background:#f00; width:250px;}.left, .content, .right {}</style></head><body><div class="header">head区域</div><div class="wrapper"> <div class="left pub-height float-left">权威的系统检测软件,为你提供全面的CPU相关信息报告。... CPU-Z是一个检测CPU信息的免费软件，这些信息包括：CPU 名称、厂商、性能、当前电压、L1 L2 cache情况；</div> <div class="content pub-height float-left">主体内容部分</div> <div class="right pub-height float-left">右侧区域</div></div></body></html>
不多解释，主要给自己备份用！

		自动登录	找回密码
密码			立即注册