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

Sponsor

在国内很多设计师(美工)都需要兼顾网站重构工作，而这些设计师大部分只懂div+css，jQuery就不是很熟悉了，今天设计达人网向大家介绍一个用jQuery+CSS让两栏/多栏布局高度自动一致的方法，对于两栏相同高度的而已需求也是很多的，所以我们也学习一下，以防日后需要，代码很简单，只有几行jQuery代码即可实现。

Demo:在线演示

jQuery代码

	var m = Math.max(
	    $('.main').height(),
	    $('.sidebar').height(),
	    $('.sidebar2').height()
	);
	$('.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>

是不是很简单呢，有问题可以在下方留言或讨论，如果你喜欢设计达人网的文章，请记得分享出去哦，谢谢支持。

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。