第一种方式使用absolute布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.equal_height {
100%;
height: 999em;
position: absolute;
left: 0;
top: 0;
}
.out_box {
66%;
margin-left: auto;
margin-right: auto;
border: 1px solid #ccc;
background-color: #f5f5f5;
overflow: hidden;
position: relative;
}
.left_box {
25%;
float: left;
position: relative;
}
.right_box {
74.6%;
float: right;
}
.left_box_bg {
background-color: #fff;
border-right: 1px solid #ccc;
}
.left_con {
padding: 1em;
position: relative;
z-index: 1;
}
.right_con {
padding: 1em;
}
.out_box img {
display: block;
}
.btn_box {
66%;
margin: 1em auto 3em;
}
</style>
<body>
<div class="out_box">
<div class="left_box">
<div class="equal_height left_box_bg"></div>
<div id="leftCon" class="left_con">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
</div>
</div>
<div class="right_box">
<div id="rightCon" class="right_con">
<img id="rightImage" src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg" />
</div>
</div>
</div>
<div class="btn_box">
<button id="btnLeftSide">左侧栏高度增加</button>
<button id="btnRightSide">右侧栏高度增加</button>
</div>
</body>
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
<script type="text/javascript">
$("#btnLeftSide").bind("click", function() {
$("#leftCon").append('<img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />');
});
$("#btnRightSide").bind("click", function() {
$("#rightCon").append('<img src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg" />');
});
</script>
</html>
第二种方式是用display:tabe-cell布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box {
600px;
margin: 40px auto;
font-size: 12px;
}
.list_row {
display: table-row;
overflow: hidden;
}
.list_cell {
display: table-cell;
30%;
margin-bottom: -100px;
padding: 1.6%;
*padding-bottom: 110px;
background-color: #f5f5f5;
*float: left;
}
.list_center {
background-color: #f0f3f9;
}
</style>
<body>
<div class="zxx_main_con">
<div class="box">
<div class="list_row">
<div class="list_cell">你一定也有过这种感觉的。当你心事重重，渴望找一个人聊一聊的时候，那个可以聊的人来了，可是你们却并没有聊什么。当然，聊是聊了，可是他聊他的，你也试着开始聊你的，只是到后来，你放弃了……那么，最后的办法就是静下来，啃啮自己的寂寞。或者反过来说，让寂寞来吞噬你。------罗兰《寂寞的感觉》</div>
<div class="list_cell list_center">作为一个被基阿异捅过两个大血窟窿的人。告诉后来的基友们一句：一命二运三风水，四积阴功五读书。</div>
<div class="list_cell">奔波了一天，收到了无数的生日快乐，享受了电影见面会现场各种形式的祝福和礼物，以及场面宏大的生日快乐歌，感谢＜西风烈＞，感谢支持我的朋友们！现在机场举长寿面祝你们都永远幸福快乐！ </div>
</div>
</div>
</div>
</body>
</html>