三列等高布局

最新推荐文章于 2019-07-14 20:59:31 发布

tangdonnaui

最新推荐文章于 2019-07-14 20:59:31 发布

阅读量93

点赞数

分类专栏： css专区　文章标签： CSS JavaScript XML Gmail XHTML ViewUI

css专区　专栏收录该内容

26 篇文章 0 订阅

订阅专栏

为了让网页更美观、协调，有的时候需要用到左右等到布局，传统的等高布局是用 javascript 实现的，现在来看看 silence 发明的真正的 CSS 实现的等高布局，其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Design Corp" content="jonmax.com" />
<meta name="Designer mail" content="maozhenzhi(at)gmail.com" />
<meta name="roots" content="jonmax.com" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" type="text/css" media="print" href="jonStyle/css/print.css" />
<link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="jonStyle/css/master.css" />
<link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="jonStyle/css/master_color.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="/rsd.xml" />
<link rel="start" href="" title="Home" />
<script src="jonStyle/js/common.js" type="text/javascript" language="javascript" ></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
#wrap{
overflow:hidden;
width:1000px;
margin:0 auto;
}
#left,#center,#right{
margin-bottom:-10000px;
padding-bottom:10000px;
}
#left{
float:left;
width:250px;
background:#00FFFF;
}
#center{
float:left;
width:500px;
background:#FF0000;
}
#right{
float:right;
width:250px;
background:#00FF00;
}
</style>
</head>

<body id="" class="">
<div id="wrap">
<div id="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div id="center">
<p>center</p>
……（20个或更多个）
<p>center</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
</body>

</html>