首 页
关于方维
网站案例
网站建设
小程序开发
解决方案
建站资讯
联系方维
400-800-9385
Js for循环多个盒子等高
发表日期:2018-09-17 08:44:39 作者来源:严成 浏览:5722 标签:
当前位置:
首页
-
建站资讯
-
网站建设
最近在项目中碰到一个头痛的问题,一时不好解决,想了很多办法,最后通过自己的实践,摸索出了两种解决方案。先来看看案例,一般情况下要使两个div盒子等高,就只要设置两个高度一样就行了,可在实际项目中,很多时候不一样,就比如说,左边盒子的内容是固定好的年份2018,右边盒子是这年里发布的新闻,而这年里发布的新闻数量是不固定,有可能增加或删减,所以高度就不能固定,实际高度只能靠内容撑开。如下图:
图1:
html代码如下:
图2:
图1左边盒子和右边盒子都分别设置了左浮动和右浮动、背景颜色、宽度,这样明显看出,两边的高度不一样,一开始我设置左边盒子高度100%,可一点用都没有,后来苦思冥想,想到了css属性定位(position),瞬间就打开了我的思路。
css代码如下:
图3:
结果:
图4:
从图4可以看出成功了,左边盒子的高度和右边盒子的高度是一样的,可难道就只有这一种方法吗?我又进入了苦思冥想中,终于我想到使用js方法。
在使用js 方法时我也进入了误区,想着获取右边盒子的高度赋予左边盒子就行了,可后来想到左边盒子年份不止一个,而是很多个,而右边内容盒子每个高度都不一样,就要分别赋值,这样来不是很麻烦吗?还不如使用css定位简单,在我慢慢摸索中想到了for循环,这下解决了,废话不多说直接上图。
图5:
结果成功了,我就不上图了。
作者:方维网络技术严成
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/4591.html
上一篇:
网站引入百度地图小问题
下一篇:
关于网站分页列表前后页按钮错位问题
相关网站设计案例
明鉴检测
联合太阳能多晶硅
华聚科仪
相关资讯
为什么选择 Node.Js 进行 Web 开发...
日期:2023-10-28 浏览:1656
用vue.js+element做表单验证提交...
日期:2023-09-27 浏览:965
网站前端制作之Anime.js用法以及优...
日期:2023-09-12 浏览:2069
常见问题
企业网站建设常见问题整理合集【置顶】
在深圳建设一个公司网站多少钱
开发网站需要多久跟这九个因素有关
最新文章
使用ThinkPHP实现支付宝境外支付接口的经...
浏览量:6651
方维做的,不仅仅是网站
浏览量:4054
新品牌网站应如何推广?
浏览量:3769
网站数据该如何进行分析
浏览量:4041
如何利用好色彩搭配突显品牌
浏览量:4650
网站建设之行业色彩应用
浏览量:3650
400-800-9385
97798819
回到顶部
0
请您留言
非常抱歉,客服不在线,麻烦留下您的联系电话或者微信,我们看到后会马上联系您!
提交
感谢留言
我们会尽快与您联系
关闭