<!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 class="out_box">
<div class="left_box">
<div class="equal_height"></div>
<div id="leftCon" class="left_con">
<img src="e.jpg" />
</div>
<div id="leftCon" class="left_con">
<img src="e.jpg" />
</div>
<div id="leftCon" class="left_con">
<img src="e.jpg" />
</div>
<div id="leftCon" class="left_con">
<img src="e.jpg" />
</div>
<div id="leftCon" class="left_con">
<img src="e.jpg" />
</div>
</div>
<div class="right_box">
<div id="rightCon" class="right_con">
<img id="rightImage" src="180.jpg" />
</div>
<div id="rightCon" class="right_con">
<img id="rightImage" src="180.jpg" />
</div>
<div id="rightCon" class="right_con">
<img id="rightImage" src="180.jpg" />
</div>
<div id="rightCon" class="right_con">
<img id="rightImage" 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>
3623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
