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

在响应式布局中经常碰到这样的情况，如两个并排的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响应式布局)"，仅为提供更多信息供用户参考使用或为学习交流的方便。我们公司提供：网站建设、网站制作、官网建设、SEO优化、小程序制作等服务，欢迎联系我们提供您的需求。