Table des matières
css 网页中间的竖线_html/css_WEB-ITnose
Jun 24, 2016 pm 12:06 PM
（此图片原地址如下：http://demo.dtcms.net/news/5.html）
我是想请教：
中间这条竖线应该怎么写，如果我以左边的div为主，写成：border-right:1px solid;，这样的话，一旦左边的内容高度比右边的低时，那么竖线就无法到底，提供的页面也可以看出此问题，但是以右边的div为主时，依然会有这个问题
请问怎么解决这个问题？
html应该怎么写？
回复讨论(解决方案)
你可以采用等高布局，无论左右内容如何改变，两部分的高度始终保持一致，你可以尝试给左侧或者右侧添加文本内容，来查看效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>.box{width:900px;margin:auto; border-top:solid 2px #ccc; border-right:solid 2px #ccc; overflow:hidden;}.cf:after{display:block;content:'';clear:both;}.cf{zoom:1;}.box div{float:left;}.left{width:598px; border-right:solid 2px #ccc;padding-bottom:2000px;margin-bottom:-2000px; background:#FF0;}.right{width:300px;padding-bottom:2000px;margin-bottom:-2000px; background:#FCF;}</style><title>无标题文档</title></head><body><div class="box cf"> <div class="left"> 在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常有利。 在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常 </div> <div class="right"></div></div></body></html>Copier après la connexion
Copier après la connexion
你可以采用等高布局，无论左右内容如何改变，两部分的高度始终保持一致，你可以尝试给左侧或者右侧添加文本内容，来查看效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>.box{width:900px;margin:auto; border-top:solid 2px #ccc; border-right:solid 2px #ccc; overflow:hidden;}.cf:after{display:block;content:'';clear:both;}.cf{zoom:1;}.box div{float:left;}.left{width:598px; border-right:solid 2px #ccc;padding-bottom:2000px;margin-bottom:-2000px; background:#FF0;}.right{width:300px;padding-bottom:2000px;margin-bottom:-2000px; background:#FCF;}</style><title>无标题文档</title></head><body><div class="box cf"> <div class="left"> 在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常有利。 在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常 </div> <div class="right"></div></div></body></html>Copier après la connexion
Copier après la connexion
这种方式要设置padding-bottom:2000px，但是如果高度大于2000时，就会出问题吧，不知是否还有其他的方法？
你还可以通过脚本控制来实现类似的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>.box{width:900px;margin:auto; border:solid 2px #ccc;}.cf:after{display:block;content:'';clear:both;}.cf{zoom:1;}.box div{float:left;}.left{width:598px; border-right:solid 2px #ccc; background:#FF0;}.right{width:300px;background:#FCF;}</style><title>无标题文档</title><script>window.onload=function(){ var oLeft=document.getElementById('left'); var oRight=document.getElementById('right'); oLeft.style.height=oRight.style.height=Math.max(oLeft.offsetHeight,oRight.offsetHeight)+'px';}</script></head><body><div class="box cf"> <div class="left" id='left'> 在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常有利。 在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联 在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常有利。 在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常通对4G非常 </div> <div class="right" id='right'></div></div></body></html>Copier après la connexion
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article chaud
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines
By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Outils chauds Tags
Article chaud
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines
By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Tags d'article chaud
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)
Sujets chauds
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
Mar 04, 2025 pm 12:32 PM
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?
Mar 04, 2025 pm 02:39 PM
Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?
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
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
Quel est le but du & lt; mètre & gt; élément?
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
Quel est le but du & lt; datalist & gt; élément?
Comment utiliser efficacement les liens HTML pour la navigation et le référencement?
Mar 18, 2025 pm 02:39 PM
Comment utiliser efficacement les liens HTML pour la navigation et le référencement?
