绝对定位与等高布局
<!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>
<link rel="stylesheet" href="../css/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/hl.css" type="text/css" />
<style>
.out_box{width:66%; margin:0 auto; border:1px solid #ccc; background-color:#f5f5f5; overflow:hidden; position:relative;}
.left_box{width:25%; float:left; position:relative; background:#0C9}
.equal_height{width:100%; height:999em; position:absolute; left:0; top:0;background-color:#fff; border-right:1px solid #f00; background:#FF6}
.left_con{padding:1em; position:relative; z-index:1; background:#36F}
.right_box{width:74.6%; float:right;}
.right_con{padding:1em;}
.out_box img{display:block;}
.btn_box{width:66%; margin:1em auto 3em;}
</style>
</head>
<body>
?<div />
??????????????????????? </div>
??????????????????????????? <div id="leftCon" />
??????????????????????? </div>
??????????????????????????? <div id="leftCon" />
??????????????????????? </div>
???????????????????????????? <div id="leftCon" />
??????????????????????? </div>
???????????????????????????? <div id="leftCon" />
??????????????????????? </div>
??????????????????? </div>
???????????????????
??????????????????? <div src="180.jpg" />
??????????????????????? </div>
??????????????????????? <div id="rightCon" src="180.jpg" />
??????????????????????? </div>
??????????????????????? <div id="rightCon" src="180.jpg" />
??????????????????????? </div>
??????????????????????? <div id="rightCon" src="180.jpg" />
??????????????????????? </div>
???????????????????????
??????????????????? </div>
??????????????????? <div style="clear:both"></div>
??????????????? </div>
???????????????
???????????????
??????????????? <div class="btn_box">
??????????????? ?<button id="btnLeftSide">左侧栏高度增加</button>
??????????????????? <button id="btnRightSide">右侧栏高度增加</button>
??????????????? </div>
</body>
</html>
