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
Die JS-Methoden addEventListener() und attachEvent() implementieren Registrierungsereignisse
Im DOM-Ereignismodell von JavaScript werden Ereig...
Umfassende Website-Bewertungslösung
<br />Manchmal werden Ihnen möglicherweise F...
Eine kurze Erläuterung der Concat-Funktion in MySQL. So fügen Sie in MySQL vor oder nach einem Feld eine Zeichenfolge hinzu
So verwenden Sie die Concat-Funktion in MySQL: CO...
Eine kurze Diskussion über 12 klassische Probleme in Angular
Inhaltsverzeichnis 1. Erklären Sie bitte, was die...
mysql 5.7.5 m15 winx64.zip Installations-Tutorial
So installieren und konfigurieren Sie mysql-5.7.5...
Verwenden von Nginx zum Implementieren der Graustufenversion
Unter Graustufenfreigabe versteht man eine Freiga...
Detaillierte Erläuterung der kombinierten MySQL-Abfrage
Verwenden von UNION Die meisten SQL-Abfragen best...
Detaillierte Erklärung der Lösung für das Problem, dass die Nohup-Protokollausgabe unter Linux zu groß ist
Kürzlich habe ich ein Spark-Streaming-Programm in...
Drei nützliche Codes, damit sich Besucher an Ihre Website erinnern
Drei nützliche Codes, die Besuchern dabei helfen,...
JavaScript – Verwenden von Slots in Vue: Slot
Inhaltsverzeichnis Verwenden von Slots in Vue: Sl...
Vue implementiert die richtige Slide-Out-Layer-Animation
In diesem Artikelbeispiel wird der spezifische Co...
Implementierung einer benutzerdefinierten Vue-Vorlage von vscode
Verwenden Sie den Vscode-Editor, um eine Vue-Vorl...
Erklärung der CAST- und CONVERT-Funktionen zur Typkonvertierung in MySQL-Datenbanken
Mit den MySQL-Funktionen CAST() und CONVERT() kön...
Informationen zur Bildlaufleiste in HTML/Bildlaufleiste entfernen
1. Die Farbe der Bildlaufleiste unter xhtml Im Ori...
Erläuterung des Menüs „Entwicklertools“ in IE8
<br />In diesem Artikel wurden die verschied...