首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

3列等高布局

2012-11-03 
三列等高布局最近在一次项目中,需要用到等高布局,如果采用background的等高方法,代码会比较繁琐,而JS会影

三列等高布局
最近在一次项目中,需要用到等高布局,如果采用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>

不多解释,主要给自己备份用!

热点排行