Récemment, lorsque je dessinais une interface, j'ai rencontré une exigence : tracer une ligne verticale dans l'interface, et la hauteur de cette ligne verticale doit occuper automatiquement tout le div parent (c'est-à-dire que la hauteur de cette ligne verticale est la même comme la hauteur des deux divs). Le plus haut est de la même hauteur).
Habituellement, nous traçons une ligne horizontale et utilisons simplement la balise <hr>. Lorsque nous traçons une ligne verticale, nous constatons que la balise est introuvable. Après avoir recherché des informations sur Internet, il est généralement recommandé d'utiliser js. J'étais paranoïaque et je voulais utiliser du CSS pur, et j'ai finalement trouvé une solution. Je partagerai mon approche ci-dessous.
Ajoutez un div supplémentaire aux deux sous-divs, définissez la bordure gauche (droite) pour qu'elle soit visible et utilisez le principe consistant à utiliser les valeurs positives et négatives de padding-bottom|margin-bottom pour se compenser. Par exemple, en définissant padding-bottom:1600px; margin-bottom:-1600px ; nous pouvons le comprendre comme suit : le padding peut être utilisé pour développer l'étiquette externe mais la marge n'est pas utilisée pour développer l'étiquette externe. Autrement dit, lorsque padding-bottom est utilisé pour augmenter la hauteur de l'étiquette externe, l'étiquette externe utilise overflow: Hidden pour masquer la hauteur excessive, afin que la hauteur puisse être alignée sur la colonne la plus haute et que la marge soit liée à la colonne la plus haute. la disposition du module et la marge peuvent compenser le remplissage. La boîte étirée permet à la disposition de démarrer à partir de la section de contenu.
Voici le code :
body{ margin-top:100px; margin-left:200px; } .maindiv{ width:900px; overflow:hidden; /*key*/ border:1px solid black; :400px; couleur d'arrière-plan:#CC6633; } .rightdiv{ float:right width:400px; background-color:#CC66FF; } .centerdiv{ float:left; border-right: 1px pointillé noir:1600px /*key*/ margin-bottom:-1600px; } <!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> <méta http-equiv=Content -Tapez content=text/html; charset=gb2312 /> <title>Méthode de dessin de lignes verticales</title> <link href=../css/demo.css rel=stylesheet type=text/css /> </head> <body> <div class=maindiv> <div class=leftdiv><br><br><br><br><br><br></div> <div class=centerdiv></div> <div class=rightdiv><br><br><br><br><br><br><br></div> </div> </body> </html >Rendu :
Au fait, notez les idées et les codes clés de js
Comparez la taille de deux divisions enfants, laquelle est la plus haute. Vous pouvez également atteindre l’objectif en choisissant de rendre visible la bordure adjacente du div le plus grand.
Voici le code de js
function myfun(){ var div1=document.getElementById(content); var div2=document.getElementById(side); var h1=div1.offsetHeight; var h2=div2.offsetHeight; borderRight=1px pointillé #B6AEA3 ; }else{ div2.style.borderLeft=1px pointillé #B6AEA3; RésumerCe qui précède est l'introduction de l'éditeur sur la façon de tracer une ligne verticale entre deux balises div en HTML. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !