响应式网站布局div盒子高度问题(css响应式布局)

2024-04-30    分类： 网站建设

在响应式布局中经常碰到这样的情况，如两个并排的div盒子（当然也可是多个并排的div盒子），一个盒子里面放的是图片（在这里我们称为A盒子），一个盒子里面放的是文字描述内容（在这里我们称为B盒子），两个盒子各占整个页面宽度的50%（或者有多个div盒子宽度一样，或者多个div盒子宽度不一样，其中有一个或多个盒子包裹一张图片），然而高度要求一样；这样就造成了在适应不同大小的屏幕时，A盒子高度会随图片的改变而改变，而B盒子高度不会出现变化，影响布局和页面的美观。
下面这张图片能够让大家有清楚的认识，效果如图：



HTML如图:
在响应式网站设计布局中，不能设置固定高度，高度要随浏览器宽度的变化而变化，这里想到了JS来设置高度来解决。因为我在这里用得jquery的版本较低，所以用的是$(window).load(function(){}),高版本请用$(window).on(“load”,function(){})。

JS如图：
效果如图：



A、B两个盒子的高度一致了，不管浏览器的宽度怎么变化，两个盒子的高度始终一致。

响应式网站除了设计要有全局性，考虑不同终端的排版外，前端制作也是非常考验技术。

以上就是关于响应式网站布局div盒子高度问题(css响应式布局)，希望对你有帮助，更多内容关注创新互联。

本文标题：响应式网站布局div盒子高度问题(css响应式布局)
浏览地址：https://www.cdcxhl.com/news14/326714.html

成都网站建设公司_创新互联，为您提供定制开发、营销型网站建设、微信小程序、ChatGPT、云服务器、搜索引擎优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

h5响应式网站建设

网站建设知识

分类信息网