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

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

WBOY
发布: 2016-06-24 12:24:04
原创
1790 人浏览过



最右边的窄边,高度是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的外面,这样行么

<div class="left"></div><div class="center"></div><div class="right"></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代码如下:

<!DOCTYPE html><html>    <head>        <title>Test</title>        <meta charset="utf-8">        <style type="text/css">            .green{                background-color:green;            }            .yellow{                background-color:yellow;            }            .red{                background-color:red;            }            table{                height:500px;            }            td{                width:200px;            }        </style>    </head>    <body>        <table>            <tr>                <td class="green"></td>                <td class="yellow" id="main"></td>                <td class="red"></td>            </tr>        </table>        <script type="text/javascript" >            window.onload = function(){                var obj = document.getElementById('main');                function getData(){                    var str = obj.innerHTML, i, len, temp = "";                    for(i=0,len=20;i<len;i++){                        temp += i+"<br/>";                    }                    obj.innerHTML = str + temp;                }                setTimeout(function(){                    getData();                    setTimeout(arguments.callee, 2000);                },2000);            }        </script>            </body></html>
登录后复制
登录后复制

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

<!DOCTYPE html><html>    <head>        <title>Test</title>        <meta charset="utf-8">        <style type="text/css">            .green{                background-color:green;            }            .yellow{                background-color:yellow;            }            .red{                background-color:red;            }            table{                height:500px;            }            td{                width:200px;            }        </style>    </head>    <body>        <table>            <tr>                <td class="green"></td>                <td class="yellow" id="main"></td>                <td class="red"></td>            </tr>        </table>        <script type="text/javascript" >            window.onload = function(){                var obj = document.getElementById('main');                function getData(){                    var str = obj.innerHTML, i, len, temp = "";                    for(i=0,len=20;i<len;i++){                        temp += i+"<br/>";                    }                    obj.innerHTML = str + temp;                }                setTimeout(function(){                    getData();                    setTimeout(arguments.callee, 2000);                },2000);            }        </script>            </body></html>
登录后复制
登录后复制

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板