Mehrere gängige Methoden für CSS-Layouts mit gleicher Höhe
|
Gleichhohes Layout Bezieht sich auf das Layout von untergeordneten Elementen mit gleicher Höhe im gleichen übergeordneten Container. Aus der Perspektive der Implementierung eines Layouts gleicher Höhe kann es in zwei Kategorien unterteilt werden Pseudohöhe Der Höhenunterschied der Unterelemente bleibt zwar bestehen, optisch erwecken sie jedoch das Gefühl gleich groß zu sein. Wahre Höhe Unterelemente haben die gleiche Höhe Schauen wir uns zunächst die Implementierungsmethode für pseudogleiche Höhe an Implementiert durch negative Ränder und Polsterung Echte Implementierung gleicher Höhe
Pseudogleiche Höhe – negativer Rand und Abstand Es wird hauptsächlich durch negative Margen implementiert. Informationen zur spezifischen Implementierung negativer Margen finden Sie im folgenden Artikel
<div Klasse="übergeordnetes Layout">
<div Klasse="left"><p>links</p></div>
<div Klasse="Mitte">
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
</div>
<div class="right"><p>richtig</p></div>
<div Stil="clear: beide;">111111111111</div>
</div>
.Elternteil{
Position: relativ;
Überlauf: versteckt;
Farbe: #efefef;
}
.Center,
.links,
.Rechts {
Box-Größe: Rahmenbox;
schweben: links;
}
.Mitte {
Hintergrundfarbe: #2ECC71;
Breite: 60%;
}
.links {
Breite: 20 %;
Hintergrundfarbe: #1ABC9C;
}
.Rechts {
Breite: 20 %;
Hintergrundfarbe: #3498DB;
}
.links,
.Rechts,
.Mitte {
Rand unten: -99999px;
Polsterung unten: 99999px;
}
Echte gleiche Höhe - Tabellenlayout
<div Klasse="übergeordnetes Layout">
<div Klasse="left"><p>links</p></div>
<div Klasse="Mitte">
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
</div>
<div class="right"><p>richtig</p></div>
<div Stil="clear: beide;">111111111111</div>
</div>
.Elternteil{
Position: relativ;
Anzeige: Tabelle;
Farbe: #efefef;
}
.Center,
.links,
.Rechts {
Box-Größe: Rahmenbox;
Anzeige: Tabellenzelle
}
.Mitte {
Hintergrundfarbe: #2ECC71;
Breite: 60%;
}
.links {
Breite: 20 %;
Hintergrundfarbe: #1ABC9C;
}
.Rechts {
Breite: 20 %;
Hintergrundfarbe: #3498DB;
}
Wahre Kontur - Absolut
<div Klasse="übergeordnetes Layout">
<div class="left"><p>links</p> </div>
<div Klasse="Mitte">
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
</div>
<div class="right"><p>richtig</p></div>
</div>
.Elternteil{
Position: absolut;
Farbe: #efefef;
Breite: 100 %;
Höhe: 200px;
}
.links,
.Rechts,
.Mitte {
Position: absolut;
Box-Größe: Rahmenbox;
oben: 0;
unten: 0;
}
.Mitte {
Hintergrundfarbe: #2ECC71;
links: 200px;
rechts: 300px;
}
.links {
Breite: 200px;
Hintergrundfarbe: #1ABC9C;
}
.Rechts {
rechts:0;
Breite: 300px;
Hintergrundfarbe: #3498DB;
}
Wahre Höhe - Flex
.Elternteil{
Anzeige: Flex;
Farbe: #efefef;
Breite: 100 %;
Höhe: 200px;
}
.links,
.Rechts,
.Mitte {
Box-Größe: Rahmenbox;
biegen: 1;
}
.Mitte {
Hintergrundfarbe: #2ECC71;
}
.links {
Hintergrundfarbe: #1ABC9C;
}
.Rechts {
Hintergrundfarbe: #3498DB;
}
<div Klasse="übergeordnetes Layout">
<div class="left"><p>links</p> </div>
<div Klasse="Mitte">
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
</div>
<div class="right"><p>richtig</p></div>
</div>
Wahre Höhe - Raster
.Elternteil{
Anzeige: Raster;
Farbe: #efefef;
Breite: 100 %;
Höhe: 200px;
Rastervorlagenspalten: 1fr 1fr 1fr;
}
.links,
.Rechts,
.Mitte {
Box-Größe: Rahmenbox;
}
.Mitte {
Hintergrundfarbe: #2ECC71;
}
.links {
Hintergrundfarbe: #1ABC9C;
}
.Rechts {
Hintergrundfarbe: #3498DB;
}
<div Klasse="übergeordnetes Layout">
<div class="left"><p>links</p> </div>
<div Klasse="Mitte">
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
</div>
<div class="right"><p>richtig</p></div>
</div>
Wahre Höhe-js Holen Sie sich die höchste Spalte aller Elemente, vergleichen und ändern Sie sie
<div Klasse="übergeordnetes Layout">
<div class="left"><p>links</p> </div>
<div Klasse="Mitte">
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
<p>Ich bin der Inhalt im Mittelteil</p>
</div>
<div class="right"><p>richtig</p></div>
</div>
.Elternteil{
Überlauf: automatisch;
Farbe: #efefef;
}
.links,
.Rechts,
.Mitte {
schweben: links;
}
.Mitte {
Breite: 60%;
Hintergrundfarbe: #2ECC71;
}
.links {
Breite: 20 %;
Hintergrundfarbe: #1ABC9C;
}
.Rechts {
Breite: 20 %;
Hintergrundfarbe: #3498DB;
}
// Höhe des höchsten Elements abrufen var nodeList = document.querySelectorAll(".parent > div");
var arr = [].slice.call(nodeList,0);
var maxHeight = arr.map(Funktion(Element){
gibt item.offsetHeight zurück
}).sort(Funktion(a, b){
gib a - b zurück;
}).Pop();
arr.map(Funktion(Element){
wenn(item.offsetHeight < maxHeight) {
item.style.height = maxHeight + "px";
}
});
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Teilen Sie eine Idee zum Aufbau eines Master-Slave-Systems für eine große MySQL-Datenbank
>>: Einführung in die Farbabstimmung von Königsblau für Webdesign
Artikel empfehlen
Detailliertes Tutorial zur Installation des Apache-Quellcodes und zur Konfiguration des virtuellen Hosts
Installieren Sie Apache aus der Quelle 1. Laden S...
Detaillierte Erläuterung zweier Methoden zum Festlegen globaler Variablen und Sitzungsvariablen in MySQL
1. Es gibt zwei Möglichkeiten, globale Variablen ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7
In diesem Tutorial erfahren Sie alles über die In...
Die ultimative Lösung für das Problem verstümmelter chinesischer Schriftzeichen auf statischen Tomcat-Seiten (HTML)
In Tomcat ist JSP nicht verstümmelt, aber HTML-Ch...
Zusammenfassung von drei Möglichkeiten zum Implementieren von Rankings in MySQL ohne Verwendung von „order by“
Übernahme des Geschäfts: Sehen Sie sich die Gehal...
Fragen zum Vorstellungsgespräch zum MySQL-Datenbankindex (grundlegende Programmierkenntnisse)
Inhaltsverzeichnis Einführung Indexierungsprinzip...
Der gesamte Prozess der lokalen Konfiguration des Reverse-Proxys über Nginx
Vorwort Nginx ist ein leichtgewichtiger HTTP-Serv...
Bringen Sie Ihnen einen Trick bei, um das Problem des Einfügens chinesischer Zeichen in MySQL dauerhaft zu lösen
Inhaltsverzeichnis Vorwort Erster Schritt: Schrit...
So konfigurieren Sie Bash-Umgebungsvariablen in Linux
Shell ist ein in der Programmiersprache C geschri...
So verhindern Sie, dass Benutzer Webseiteninhalte mit reinem CSS kopieren
Vorwort Als ich mein eigenes persönliches Blog sc...
Detaillierte Erklärung zur Implementierung des sekundären Caches mit MySQL und Redis
Redis-Einführung Redis ist vollständig Open Sourc...
Vue+Rem benutzerdefinierter Karusselleffekt
Die Implementierung eines benutzerdefinierten Kar...
Zwei Methoden zur Implementierung der Mysql-Remoteverbindungskonfiguration
Zwei Methoden zur Implementierung der Mysql-Remot...
Vorteile von MySQL-Abdeckungsindizes
Ein allgemeiner Vorschlag besteht darin, Indizes ...
uniapp implementiert Datums- und Zeitauswahl
In diesem Artikelbeispiel wird der spezifische Co...