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
5 Möglichkeiten zur Migration von MySQL zu ClickHouse
Die Datenmigration muss von MySQL nach ClickHouse...
Docker entfernt abnormale Containervorgänge
Dieser Neuling ist auf ein solches Problem gestoß...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.20 (Win10)
In diesem Artikel wird die Installations- und Kon...
Analyse des Problems des Datenverlusts durch erzwungene Aktualisierung von Vuex
vuex-persistenter Zustand Kernprinzip: Alle Vuex-...
MySQL Order By-Codebeispiel für Sortierregeln für mehrere Felder
Sag es im Voraus Aus einer Laune heraus möchte ic...
Fallstudie zu MySQL-Berechtigungen und Datenbankdesign
Berechtigungen und Datenbankdesign Benutzerverwal...
CSS zum Erreichen der ersten Zeile und ersten Spalte der Tabelle, fester und adaptiver Fensterbeispielcode
Der heutige schriftliche Campus-Rekrutierungstest...
MySQL-Abfrageanweisungsprozess und grundlegende Konzepte der EXPLAIN-Anweisung und deren Optimierung
Die Leistung Ihrer Website oder Ihres Dienstes hä...
Leitfaden zum Schreiben von HTML-Code
Gängige Konventions-Tags Selbstschließende Tags, ...
JavaScript implementiert eine bidirektionale verknüpfte Listenprozessanalyse
Inhaltsverzeichnis 1. Was ist eine doppelt verknü...
SQL-Abfrage MySql-Datenbanktabellenname und -beschreibung Tabellenfeld- (Spalten-)Informationen
Im Folgenden finden Sie eine Einführung in die Ve...
Verwenden Sie HTML+Css, um eine einfache Navigationsleistenfunktion zu implementieren (die Navigationsleiste ändert die Hintergrundfarbe, wenn die Maus darauf stößt).
Ⅰ. Problembeschreibung: Verwenden Sie HTML+CSS, u...
Detaillierte Erklärung des Rastersystems, der Navigationsleiste und des Karussells von Javascript Bootstrap
Inhaltsverzeichnis Einführung in Bootstrap und di...
So leiten Sie den Nginx-Verzeichnispfad um
Wenn der Pfad nach dem Domänennamen auf andere Ve...
Benutzerdefinierter Bulletbox-Effekt von Vue (Bestätigungsfeld, Eingabeaufforderungsfeld)
In diesem Artikelbeispiel wird der spezifische Co...