html5 两栏等宽布局代码,jQuery+CSS让两栏/多栏布局高度自动一致

最新推荐文章于 2023-09-02 17:54:55 发布

weixin_39761491

最新推荐文章于 2023-09-02 17:54:55 发布

阅读量230

点赞数

文章标签： html5 两栏等宽布局代码

本文介绍了如何利用jQuery和CSS来实现两栏或多栏布局的高度自动一致，适合不熟悉jQuery的设计师参考。通过简单的jQuery代码和CSS样式，可以轻松解决两栏内容等高的问题。示例代码和在线演示帮助理解实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 代码

box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01

box02 box02 box02 box02

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

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

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

姗妮 -

2013 年 06 月 14 日下午 10:25

为什么我这么做还是不对呢？？

carcompany -

2013 年 06 月 15 日下午 2:35

你可以直接下载demo页试试

{ 发表评论 }

姓名 (必填)

邮件 (必填)

网站