Als ich kürzlich eine Schnittstelle zeichnete, stieß ich auf eine Anforderung: Zeichnen Sie eine vertikale Linie in die Schnittstelle, und die Höhe dieser vertikalen Linie muss automatisch das gesamte übergeordnete Div einnehmen (dh die Höhe dieser vertikalen Linie ist gleich). als Höhe der beiden Divs).
Normalerweise zeichnen wir eine horizontale Linie und verwenden einfach das Tag <hr>. Wenn wir eine vertikale Linie zeichnen, stellen wir fest, dass das Tag nicht gefunden werden kann. Nach der Suche nach Informationen im Internet wird generell die Verwendung von js empfohlen. Ich war paranoid und wollte reines CSS verwenden und habe schließlich eine Lösung gefunden, die ich unten mitteilen werde.
Fügen Sie den beiden Unter-Divs ein weiteres Div hinzu, stellen Sie den linken (rechten) Rand so ein, dass er sichtbar ist, und verwenden Sie das Prinzip, die positiven und negativen Werte von padding-bottom|margin-bottom zu verwenden, um sich gegenseitig auszugleichen. Wenn wir beispielsweise padding-bottom:1600px; margin-bottom:-1600px festlegen, können wir Folgendes verstehen: „padding“ kann zum Erweitern des äußeren Etiketts verwendet werden, aber „margin“ wird nicht zum Erweitern des äußeren Etiketts verwendet. Das heißt, wenn padding-bottom verwendet wird, um die Höhe der äußeren Beschriftung zu erweitern, verwendet die äußere Beschriftung overflow:hiden, um die überschüssige Höhe auszublenden, sodass die Höhe an der höchsten Spalte ausgerichtet werden kann und der Rand mit der verknüpft ist Modullayout und Rand können die Polsterung ausgleichen. Durch die gestreckte Box kann das Layout im Inhaltsbereich beginnen.
Hier ist der Code:
body{ margin-top:100px; } .maindiv{ width:900px; overflow:10px; :400px; Hintergrundfarbe:#CC6633; } .rightdiv{ float:right; Hintergrundfarbe:#CC66FF; .centerdiv{ float:left; width:50px; padding-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> <meta http-equiv=Content -Type content=text/html; charset=gb2312 /> <title>Vertikale Linienzeichnungsmethode</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 >Darstellung:
Schreiben Sie übrigens die Ideen und Schlüsselcodes von js auf
Vergleichen Sie die Höhe zweier untergeordneter Divs, welches höher ist. Sie können das Ziel auch erreichen, indem Sie den angrenzenden Rand des größeren Div sichtbar machen.
Das Folgende ist der Code von js
function myfun(){ var div1=document.getElementById(content); var h1=div1.offsetHeight; if(h1>h2){ div1.style. borderRight=1px gestrichelt #B6AEA3 }else{ div2.style.borderLeft=1px gestrichelt #B6AEA3; } } ZusammenfassenDas Obige ist die Einführung des Herausgebers zum Zeichnen einer vertikalen Linie zwischen zwei div-Tags in HTML. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!