So zeichnen Sie eine vertikale Linie zwischen zwei Div-Tags in HTML

Als ich kürzlich eine Schnittstelle zeichnete, stieß ich auf eine Anforderung: Zeichnen Sie eine vertikale Linie in die Schnittstelle, und diese vertikale Linie muss automatisch die gesamte Höhe des übergeordneten Divs ausfüllen (dh die Höhe dieser vertikalen Linie entspricht der des höheren der beiden Divs).

Normalerweise können wir mit dem Tag <hr> direkt eine horizontale Linie zeichnen, aber wenn wir versuchen, eine vertikale Linie zu zeichnen, stellen wir fest, dass wir das Tag nicht finden können. Ich habe online nach Informationen gesucht und im Allgemeinen die Verwendung von js empfohlen. Ich war etwas paranoid und wollte dafür reines CSS verwenden. Endlich habe ich eine Lösung gefunden. Im Folgenden möchte ich Ihnen meinen Ansatz erläutern.

Fügen Sie zwischen den beiden untergeordneten Divs ein weiteres Div hinzu, legen Sie fest, dass der linke (rechte) Rand sichtbar ist, und verwenden Sie das Prinzip des Versatzes der positiven und negativen Werte von padding-bottom | margin-bottom. Wenn wir beispielsweise padding-bottom:1600px; margin-bottom:-1600px festlegen, können wir davon ausgehen, dass padding zum Erweitern der Tags der äußeren Ebene verwendet wird, während margin nicht zum Erweitern der Tags der äußeren Ebene verwendet wird. Das heißt, wenn „padding-bottom“ verwendet wird, wird die Höhe des äußeren Etiketts erweitert, und das äußere Etikett verwendet „overflow:hidden;“, um die überschüssige Höhe zu verbergen, sodass die Höhe an der höchsten Spalte ausgerichtet werden kann. Der Rand bezieht sich auf das Modullayout. Der Rand kann die durch Padding erweiterte Box versetzen, sodass das Layout beim Inhaltsteil beginnen kann.

Hier ist der Code:

Körper{  
    Rand oben: 100px;  
    Rand links: 200px;  
}  
.maindiv{  
    Breite: 900px;  
    Polsterung: 10px;  
    Überlauf: versteckt; /*Schlüssel*/  
    Rand: 1px, durchgehend schwarz;  
}  
.leftdiv{  
    schweben: links;  
    Breite: 400px;  
    Hintergrundfarbe: #CC6633;  
}  
.rightdiv{  
    schweben: rechts;  
    Breite: 400px;  
    Hintergrundfarbe: #CC66FF;  
}  
.centerdiv{  
    schweben: links;  
    Breite: 50px;  
    Rahmen rechts: 1px gestrichelt schwarz;  
    padding-bottom:1600px; /*Schlüssel*/  
    Rand unten: -1600px; /*Schlüssel*/  
}  

<!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">  
<Kopf>  
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" />  
<title>Vertikale Strichzeichnung</title>  
<link href="../css/demo.css" rel="stylesheet" type="text/css" />  
</Kopf>  
<Text>  
    <div Klasse="maindiv">  
        <div class="leftdiv"><br><br><br><br><br><br><br></div>  
        <div Klasse="centerdiv"></div>  
        <div class="rightdiv"><br><br><br><br><br><br><br><br></div>  
    </div>  
</body>  
</html>

Effektbild:

Schreiben Sie übrigens einige Ideen und Schlüsselcodes von js

Vergleichen Sie die Höhen der beiden untergeordneten Divs, um zu sehen, welches höher ist. Sie können dies auch erreichen, indem Sie den angrenzenden Rand des größeren Div so einstellen, dass er sichtbar ist.

Das Folgende ist der js-Code

Funktion meinSpaß(){  
  var div1 = document.getElementById("Inhalt");  
  var div2 = document.getElementById("Seite");  
  var h1=div1.offsetHeight;  
  var h2=div2.offsetHeight;  
    wenn(h1>h2){  
        div1.style.borderRight="1px gestrichelt #B6AEA3";  
    }anders{  
        div2.style.borderLeft="1px gestrichelt #B6AEA3";  
  }  
}

Zusammenfassen

Oben habe ich Ihnen gezeigt, wie Sie in HTML eine vertikale Linie zwischen zwei Div-Tags zeichnen. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<: Die umfassendste Sammlung von Front-End-Interviewfragen

>>: Zusammenfassung der Vue3-Slot-Nutzung

Sie müssen wirklich die Verwendung von CSS-Variablen var() verstehen

So zeichnen Sie eine vertikale Linie zwischen zwei Div-Tags in HTML

Sie müssen wirklich die Verwendung von CSS-Variablen var() verstehen

Detaillierte Erklärung, wie Sie das automatische Beenden des Docker-Containers verhindern können

Data URI und MHTML Komplettlösung für alle Browser

So verwenden Sie JavaScript, um die am häufigsten wiederholten Zeichen in einer Zeichenfolge abzurufen

Methoden und Schritte zum Bereitstellen von Go-Projekten basierend auf Docker-Images

So zeigen Sie den Kennwortablauf unter Linux an und konfigurieren ihn

Natives JS zur Implementierung der Formularvalidierungsfunktion

Beispielcode zur Implementierung des Div-Konkaveckenstils mit CSS

Reiner CSS-freier Implementierungscode für Websites mit Umschaltfunktion für den Dunkelmodus

Erläuterung der Array-Verarbeitung in React und Redux

Artikel empfehlen

Implementierung der Navigationsleiste und des Dropdown-Menüs in CSS

Verschiedene Arten von MySQL-Indizes

Allgemeine Shell-Skriptbefehle und zugehöriges Wissen unter Linux

Implementierungsschritte zur Installation eines Redis-Containers in Docker

Automatischer Commit-Vorgang für MySQL-Transaktionen

Eine detaillierte Erklärung, wie React Fiber funktioniert

Vue-Anfängerhandbuch: Erstellen des ersten Vue-cli-Scaffolding-Programms

Tipps zum Listenaufbau für Website-Wartungsseiten

Vue3 kapselt die Lupeneffektkomponente der Jingdong-Produktdetailseite

Analyse der Nginx-Konfiguration und häufig gestellter Fragen des Alibaba Cloud CentOS7-Servers

Das Problem „mmx64.efi nicht gefunden“ tritt bei der Installation des Ubuntu18-Dualsystems auf Win10 auf

Reine CSS-Implementierung eines Radio- und Checkbox-Effektbeispiels

Details zu 7 Arten der Komponentenkommunikation in Vue3

Vue implementiert das Ziehen und Sortieren von Bildern

Beispielerklärung für langsame MySQL-Abfragen und -Protokolle