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 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
Artikel empfehlen
So gehen Sie mit dem vom Linux-System gemeldeten Warnproblem xfs_vm_releasepage um
Problembeschreibung Auf mehreren Rechnern wurden ...
Zusammenfassung der Lastausgleichsmethoden von Nginx
Um den Lastenausgleich zu verstehen, müssen Sie s...
Detaillierte Erläuterung von Beispielen für MySQL-Einzeltabellenabfragevorgänge [Syntax, Einschränkungen, Gruppierung, Aggregation, Filterung, Sortierung usw.]
Dieser Artikel beschreibt die MySQL-Einzeltabelle...
Das praktische Gitlab-Tutorial verwendet Git Config für zugehörige Konfigurationsvorgänge
Dieser Artikel stellt den Inhalt zur Git-Konfigur...
Detaillierte Erklärung zur Verbindung von Java mit Mysql Version 8.0.18
In Bezug auf die Verbindungsmethode zwischen Java...
Beispielcode zur Implementierung der PC-Auflösungsanpassung in Vue
Inhaltsverzeichnis planen Abhängigkeiten installi...
Implementierungsskript für geplante Datenbanksicherung unter Linux
Inhaltsverzeichnis Szenario: Die Serverdatenbank ...
Detaillierte Analyse des virtuellen Nginx-Hosts
Inhaltsverzeichnis 1. Virtueller Host 1.1 Virtuel...
Keep-Alive-Multilevel-Routing-Cache-Problem in Vue
Inhaltsverzeichnis 1. Problembeschreibung 2. Ursa...
Ein Artikel zum Erlernen von CSS3-Bildrändern
Mit der CSS3-Eigenschaft „border-image“ können Si...
Wie InnoDB Transaktionsisolationsebenen geschickt implementiert
Vorwort Im vorherigen Artikel „Detaillierte Erklä...
Zusammenfassung von 11 erstaunlichen Best Practices für die Refaktorierung von JavaScript-Code
Inhaltsverzeichnis 1. Extrahieren von Funktionen ...
Eine kurze Erläuterung der Unterschiede zwischen FTP, FTPS und SFTP
Inhaltsverzeichnis Einführung in FTP, FTPS und SF...
js regulärer Ausdruck Lookahead und Lookbehind und nicht erfassende Gruppierung
Inhaltsverzeichnis Kombinieren von Lookahead und ...
MySQL in Windows net start mysql Beim Starten des MySQL-Dienstes tritt ein Fehler auf. Lösung für Systemfehler
Inhaltsverzeichnis 1- Fehlerdetails 2-Einzellösun...