多列等高方案

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>三列等高</title>
		<style>
			#header
			{
				background-color: gray;
				height: 100px;
				width: 960px;
			}
			#container-1, #container-2, #container-3
			{
				position: relative;
				float: left;
			}
			#container-1
			{		
				overflow: hidden;
				width: 960px;
				margin-top: 10px;
				background-color: red;	
			}
			#container-2
			{
				background-color: green;
				left: 240px;
			}
			#container-3
			{
				float: left;
				background-color: blue;
				left: 480px;
			}
			#main, #primary, #secondary
			{
				display: inline;
				margin: 0 10px;
				position: relative;
				float: left;
			}
			#main
			{
				width: 460px;
				right: 50%;
			}
			#primary
			{				
				width: 220px;
				right: 125%;
			}
			#secondary
			{
				right: 75%;
				width: 220px;		
			}
		</style>		
	</head>
	<body>
		<div id="header"></div>			
		<div id="container-1">
			<div id="container-2">
				<div id="container-3">
					<div id="main">Main<br />Main</div>
					<div id="primary">Primary</div>
					<div id="secondary">Secondary</div>
				</div>
			</div>
		</div>		
		<div style="clear: left">
		</div>
	</body>
</html>

发表评论