0

0

有一个页面从左到右分为三块,中间一块div高度是随着数据的增加而边长,怎样使左右2边的div也边长?_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:24:04

|

1899人浏览过

|

来源于php中文网

原创



最右边的窄边,高度是repeat的。
css如下:

.rightLine {    height: 955px;    background-image: url(/LogService/images/right.jpg);    background-repeat: repeat-y;    width: 26px;    position: absolute;    top: 54px;    left: 1225px;;}


中间的数据是跟微博一样,每次拉倒最下面加载新数据,所以中间的数据div越来越长。

但是左右两边div的长度不会跟着变化,有没有人有好的办法?


回复讨论(解决方案)

左右两边做成跟加载div块一体的,加载div块的同时也加了两边

用js控制div高度,使得较矮的两个等于最高的那个。

左右两边不就是点背景吗 
把背景 给父级就行可以了吗, 两个背景 ,给两个div  里面 再分左中右  这样 有一个高度变化   而父级两个背景也会变化

用js控制div高度,使得较矮的两个等于最高的那个。

你说的这个方法我试过,是不行的 ,不是瞬时的变化,非要等到中间的加载完,两边才突然变长,很不和谐!!!

左右两边不就是点背景吗 
把背景 给父级就行可以了吗, 两个背景 ,给两个div  里面 再分左中右  这样 有一个高度变化   而父级两个背景也会变化


你说的这个我怎么看不懂呢,说的有点乱,可以的话,可以QQ教小弟一下么?

左右两边做成跟加载div块一体的,加载div块的同时也加了两边

你说的这个我好想有点懂了,不过具体怎么做还是不太清楚,求赐教,方便的话,留下QQ,教一下小弟弟,小弟弟感激不尽!





.div1 {background:url(img/left.png) repeat-y 0 0;}
.div2 {background:url(img/right.png) repeat-y right 0;}
这能看明白吗  只要中间的内容 增加 左右两块的背景 也会变高



    

    

    



里面的布局当然 你知道了,只是 背景不太明白,用我上面的方法  应该能理解吧
这样 里面 任何一个高度增加 父级的两个背景都会 增高   也就是等高





.div1 {background:url(img/left.png) repeat-y 0 0;}
.div2 {background:url(img/right.png) repeat-y right 0;}
这能看明白吗  只要中间的内容 增加 左右两块的背景 也会变高



    

    

    



里面的布局当然 你知道了,只是 背景不太明白,用我上面的方法  应该能理解吧
这样 里面 任何一个高度增加 父级的两个背景都会 增高   也就是等高


我感觉你理解错我的意思了。




我的布局这是这样的 ,center就是数据div,高度一直变大,left和right需要随着center Div变化.
不知道这个怎么实现



你的意思是中间的高度变化有动画效果吗,
如果可以的话把左右div改成一个大的div套在中间div的外面,这样行么



$(".left").height($(".showListDiv").height());$(".right").height($(".showListDiv").height());


ajax每次加载数据之后,在for循环后面加上这两句话就OK了,试试吧!!!






.div1 {background:url(img/left.png) repeat-y 0 0;}
.div2 {background:url(img/right.png) repeat-y right 0;}
这能看明白吗  只要中间的内容 增加 左右两块的背景 也会变高



    

    

    



里面的布局当然 你知道了,只是 背景不太明白,用我上面的方法  应该能理解吧
这样 里面 任何一个高度增加 父级的两个背景都会 增高   也就是等高


我感觉你理解错我的意思了。




我的布局这是这样的 ,center就是数据div,高度一直变大,left和right需要随着center Div变化.
不知道这个怎么实现




难道不是这样吗,左右两边增高,并一定div高度变高,你的不就是背景吗?
两边是图, 这个方法可行
如果你觉得两边是 高度要变化或内容   增高,那 得用js 
看你怎么理解了,

我有个办法可以不用js,利用table的td特性,当然你也可以不用table标签,用display:table和table-cell,效果一样的。demo代码如下:

            Test                                

我有个办法可以不用js,利用table的td特性,当然你也可以不用table标签,用display:table和table-cell,效果一样的。demo代码如下:

            Test                                

觉得LS的方案可行,LZ可以在外面套上TABLE,单行三列,左右两列的高度设为Auto,中间列高度变化后,左右两列列高会自动增加。
或者使用JS控制,当中间DIV高度发生变化,就改变左右两个DIV的高度

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

22

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

24

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

99

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

132

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

15

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

65

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

61

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

63

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
HTML每日小知识(第二季)
HTML每日小知识(第二季)

共47课时 | 10.8万人学习

HTML/CSS技术小知识每日分享
HTML/CSS技术小知识每日分享

共37课时 | 12.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号