jQuery+CSS让两栏/多栏布局高度自动一致

BY 设计达人

box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01
box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03

jQuery代码

	//取得main,sidebar,sidebar2分栏的高度
	var m = Math.max(
	    $('.main').height(),
	    $('.sidebar').height(),
	    $('.sidebar2').height()
	);
	//设置content的高度相同
	$('.content').height(m);
	

CSS样式

	div {
	    background-color: #eee;
	    display: block;
	    float: left;
	    margin-right: 10px;
	    padding: 10px;
	    width: 150px;
	}

HTML 代码

	<div class="content main"> box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 </div>
	<div class="content sidebar">box02 box02 box02 box02 </div>
	<div class="content sidebar2">box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03  box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03  box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03</div>

赞助商

赞助商