Beispielcode zum Implementieren der unteren Ausrichtung auf verschiedene Arten mit CSS
|
Aufgrund der Geschäftsanforderungen des Unternehmens muss der Effekt des roten Bereichs in der folgenden Abbildung erreicht werden:
Wirkungsbeschreibung: 1. Die Daten im roten Bereich müssen umgekehrt werden (d. h. von unten gezählt, die Zahlen sind 1, 2, 3, 4, 5) und unten angezeigt werden Implementiert mit Flex-Layout
<Stil>
*{
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
.Container{
Position: relativ;
Breite: 300px;
Höhe: 500px;
Rand: 10px automatisch;
Rand: 1px durchgezogen #f60;
Farbe: #fff;
}
.Spitze,
.unten{
Höhe: 50%;
Polsterung: 20px;
}
.Spitze{
Hintergrundfarbe: #da2e22;
}
.top>ul{
Breite: 100 %;
Höhe: 100%;
Überlauf: automatisch;
}
.unten{
Überlauf: automatisch;
Hintergrundfarbe: #1e1e1e;
}
</Stil>
<div Klasse="Container">
<div Klasse="oben">
<ul style="padding-top: 104px;">
<li>Ich bin das erste li-Element</li>
<li>Ich bin das zweite Li-Element</li>
<li>Ich bin das dritte Li-Element</li>
<li>Ich bin das vierte Li-Element</li>
<li>Ich bin das fünfte Li-Element</li>
</ul>
</div>
<div Klasse="unten">
<ul>
<li>Ich bin das erste li-Element</li>
<li>Ich bin das zweite Li-Element</li>
<li>Ich bin das dritte Li-Element</li>
<li>Ich bin das vierte Li-Element</li>
<li>Ich bin das fünfte Li-Element</li>
</ul>
</div>
</div>Die Verwendung des Flex-Layouts ist derzeit die beste Lösung. Die untergeordneten Elemente werden weiterhin in der Reihenfolge 1, 2, 3, 4, 5 angeordnet. Der Browser kehrt beim Rendern automatisch um, und die Bildlaufleiste wird ebenfalls umgekehrt, d. h. automatisch nach unten positioniert. Aber IE10 unterstützt ~ noch nicht, daher kann es in dem Projekt, an dem ich arbeite, nicht verwendet werden und ich muss einen anderen Weg finden. Verwenden Sie padding-top, um Folgendes zu erreichen:
<Stil>
*{
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
.Container{
Position: relativ;
Breite: 300px;
Höhe: 500px;
Rand: 10px automatisch;
Rand: 1px durchgezogen #f60;
Farbe: #fff;
}
.Spitze,
.unten{
Höhe: 50%;
Polsterung: 20px;
}
.Spitze{
Hintergrundfarbe: #da2e22;
}
.top>ul{
Breite: 100 %;
Höhe: 100%;
Überlauf: automatisch;
}
.unten{
Überlauf: automatisch;
Hintergrundfarbe: #1e1e1e;
}
</Stil>
<div Klasse="Container">
<div Klasse="oben">
<ul style="padding-top: 104px;">
<li>Ich bin das erste li-Element</li>
<li>Ich bin das zweite Li-Element</li>
<li>Ich bin das dritte Li-Element</li>
<li>Ich bin das vierte Li-Element</li>
<li>Ich bin das fünfte Li-Element</li>
</ul>
</div>
<div Klasse="unten">
<ul>
<li>Ich bin das erste li-Element</li>
<li>Ich bin das zweite Li-Element</li>
<li>Ich bin das dritte Li-Element</li>
<li>Ich bin das vierte Li-Element</li>
<li>Ich bin das fünfte Li-Element</li>
</ul>
</div>
</div>Die Verwendung von padding-top ist die einfachste Möglichkeit zur Implementierung, kann jedoch nicht mit reinem CSS umgesetzt werden. Es muss auch mit JS berechnet werden. Zu Beginn meines Projekts habe ich zur Implementierung die Padding-Top+JS-Berechnung verwendet. Diese Methode ist nicht einfach zu implementieren. Jedes Mal, wenn ein Datenelement per WebSocket übertragen wird, muss eine Berechnung durchgeführt werden. Gibt es also einen besseren Weg? Die Antwort ist eindeutig ja. In der CSS-Welt gibt es immer unerwartete Überraschungen. Der Schlüssel liegt darin, über starke interne Fähigkeiten zu verfügen. Verwenden Sie Tabellenzellen zur Implementierung
<Stil>
*{
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
.Container{
Position: relativ;
Breite: 300px;
Höhe: 500px;
Rand: 10px automatisch;
Rand: 1px durchgezogen #f60;
Farbe: #fff;
}
.Spitze,
.unten{
Höhe: 50%;
Polsterung: 20px;
Überlauf: automatisch;
}
.Spitze{
Hintergrundfarbe: #da2e22;
}
.top-container{
Anzeige: Tabelle;
Breite: 100 %;
Höhe: 100%;
}
.top-container>ul{
Anzeige: Tabellenzelle;
vertikale Ausrichtung: unten;
Breite: 100 %;
Höhe: 100%;
}
.unten{
Hintergrundfarbe: #1e1e1e;
}
</Stil>
<div Klasse="Container">
<div Klasse="oben">
<div Klasse="Top-Container">
<ul>
<li>Ich bin das erste li-Element</li>
<li>Ich bin das zweite Li-Element</li>
<li>Ich bin das dritte Li-Element</li>
<li>Ich bin das vierte Li-Element</li>
<li>Ich bin das fünfte Li-Element</li>
</ul>
</div>
</div>
<div Klasse="unten">
<ul>
<li>Ich bin das erste li-Element</li>
<li>Ich bin das zweite Li-Element</li>
<li>Ich bin das dritte Li-Element</li>
<li>Ich bin das vierte Li-Element</li>
<li>Ich bin das fünfte Li-Element</li>
</ul>
</div>
</div>Die Verwendung einer Tabellenzelle zur Ausrichtung unten ist derzeit die letzte Lösung und sie ist auch mit IE8 kompatibel. Das Problem mit der unteren Ausrichtung wurde gelöst. Das Problem „die Bildlaufleiste muss nach unten gezogen werden“ kann mit einer Tabellenzelle nicht gelöst werden. Mir bleibt nichts anderes übrig, als es mit js zu steuern. Ich frage mich, ob irgendein großer Gott andere Lösungen hat~ Mit CSS-Tabellen- und Tabellenzellenlayouts lassen sich viele Spezialeffekte erzielen. Weitere Einzelheiten finden Sie in der mir bekannten Anwendung „display: table-cell“ von Zhang Xinxu. 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. |
<<: HTML-Hyperlinks im Detail erklärt
>>: WeChat Mini-Programm QR-Code-Generierungstool weapp-qrcode Detaillierte Erklärung
Artikel empfehlen
So konfigurieren Sie Bash-Umgebungsvariablen in Linux
Shell ist ein in der Programmiersprache C geschri...
So verwenden Sie Node zum Implementieren des statischen Datei-Cachings
Inhaltsverzeichnis Cache Klassifizierung des Cach...
Tutorial zur Installation und Konfiguration von Tomcat auf Alibaba Cloud Server und zum Hinzufügen externer Netzwerkzugriffsports
Alibaba Cloud Server installiert und konfiguriert...
Was ist SSH? Wie benutzt man? Was sind die Missverständnisse?
Inhaltsverzeichnis Vorwort Was ist SSH? Wofür wir...
jQuery realisiert Bildhervorhebung
Es ist sehr üblich, Bilder auf einer Seite hervor...
Implementierung von vite+vue3.0+ts+element-plus zum schnellen Erstellen eines Projekts
Inhaltsverzeichnis Vite-Funktion Umgebung verwend...
Installieren Sie die MySQL5.5-Datenbank in einer CentOS7-Umgebung
Inhaltsverzeichnis 1. Prüfen Sie, ob MySQL auf de...
MySQL SQL-Anweisungsmethode zum Ausblenden der mittleren vier Ziffern der Mobiltelefonnummer
Erste Abfragetabellenstruktur (sys_users): WÄHLEN...
Beispielcode für Nginx zur Erreichung dynamischer und statischer Trennung
1. Einfache Konfiguration der dynamischen und sta...
Zusammenfassung einiger wichtiger Punkte zu mysql init_connect
Die Rolle von init_connect init_connect wird norm...
TypeScript-Problem beim Iterieren über Objekteigenschaften
Inhaltsverzeichnis 1. Problem 2. Lösung 1. Deklar...
Ein Beispiel für die vertikale Zentrierung von Unterelementen in Div mithilfe des Flex-Layouts
1. Flex ist die Abkürzung für Flexible Box, was „...
Implementierung von Nginx-Weiterleitungsübereinstimmungsregeln
1. Regulärer Ausdrucksabgleich ~ für Groß- und Kl...
Implementierungscode für die nahtlose Verbindung des Div-Bildlaufbands
Code kopieren Der Code lautet wie folgt: <html...
Detaillierte Erläuterung der MySQL-Transaktionsisolationsebene und des MVCC
Inhaltsverzeichnis Transaktionsisolationsebene Be...