interface Web
tutoriel HTML
有一个页面从左到右分为三块，中间一块div高度是随着数据的增加而边长，怎样使左右2边的div也边长？_html/css_WEB-ITnose
有一个页面从左到右分为三块，中间一块div高度是随着数据的增加而边长，怎样使左右2边的div也边长？_html/css_WEB-ITnose
最右边的窄边，高度是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的高度
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
HTML est-il facile à apprendre pour les débutants?
Apr 07, 2025 am 12:11 AM
HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
