三列等高布局

最新推荐文章于 2020-11-26 17:24:28 发布

原创最新推荐文章于 2020-11-26 17:24:28 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#XHTML #HTML #Cache

html & css 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种实现三列等高布局的方法，通过使用“隐藏容器溢出”、“正内补丁”和“负外补丁”的组合来简化代码并提高页面加载效率。

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