Lösung für die Ineffektivität der flexiblen Layoutbreite in CSS3
|
In Projekten wird häufig das zweispaltige Layout verwendet. Es gibt viele Möglichkeiten, diesen Effekt zu erzielen.
Am bequemsten ist jedoch Flex. Legen Sie display:flex für das äußere übergeordnete Element fest und legen Sie dann die Breite des anzupassenden untergeordneten Elements fest. Der spezifische Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Flex-Breite wird nicht wirksam</title>
</Kopf>
<Text>
<Stil>
/* Stil zurücksetzen */
* {
Rand: 0px;
Polsterung: 0px;
}
/* Stelle die Anzeige der äußeren Ebene auf Flex ein */
.Kasten {
Anzeige: Flex;
Höhe: 100px;
Breite: 100 %;
}
/* Linke Seite adaptiv*/
.box .links {
Flex-Wachstum: 1;
Hintergrund: rot;
}
/* Rechte Seite repariert */
.box .rechts {
Breite: 200px;
Hintergrund: gelb;
}
</Stil>
<!-- Äußerer Kasten -->
<div Klasse="Box">
<!-- Links -->
<div Klasse="links"></div>
<!-- Rechte Seite -->
<div Klasse="rechts"></div>
</div>
</body>
</html> Das Ergebnis der Ausführung dieses Codes ist wie im Screenshot oben dargestellt, aber dieser Code hat einen kleinen Fehler. Das heißt, wenn sich auf der linken Seite (der adaptiven Seite) Inhalt befindet und die Breite des Inhalts die Breite der linken Seite überschreitet, wird die rechte Seite (feste Breite) kleiner gequetscht und Sie werden feststellen, dass die von Ihnen angegebene feste Breite (200px im Beispiel) nicht wirksam ist oder eine Bildlaufleiste angezeigt wird.
/*Überschreitung des Inhaltsstils */
.box .links .inhalt {
Breite: 1000px;
}
<!-- Links -->
<div Klasse="links">
<!-- Überschüssiger Inhalt -->
<div Klasse="Inhalt"></div>
</div>Laufergebnisse:
Der Inhalt überschreitet das Limit und eine Bildlaufleiste wird angezeigt. Dieses Problem lässt sich leicht lösen. Fügen Sie einfach links das versteckte Overflow-Attribut hinzu.
/* Linke Seite adaptiv*/
.box .links {
Flex-Wachstum: 1;
Hintergrund: rot;
Überlauf: versteckt;
}
Aber das Problem tritt erneut auf. Es erscheint zwar auf der rechten Seite, aber seine Breite wird kleiner und beträgt weniger als 200.
/* Rechte Seite repariert */
.box .rechts {
Breite: 200px;
Mindestbreite: 200px;
Hintergrund: gelb;
}
Auf diese Weise ist die Kompatibilität unabhängig davon gewährleistet, welchen Bildschirm Sie verwenden und wie Sie Drag & Drop verwenden. . . Dies ist das Ende dieses Artikels zur Lösung des Problems, dass die Flex-Layoutbreite in CSS3 nicht wirksam wird. Weitere Informationen zur nicht wirksamen Flex-Layoutbreite finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Detaillierte Erklärung zur Synchronisierung von Daten von MySQL mit Elasticsearch
Artikel empfehlen
Das neueste grafische Tutorial zur Installation von MySQL 8.0.16 Winx64 unter Win10
Das Herunterladen dieser Datenbank nimmt viel Zei...
Wie besteht man die W3C-Validierung?
Neben der Festlegung von Vorschriften für verschi...
Bezüglich des Problems der Verwendung von Webpack-Anweisungen in VSCode, das anzeigt: „Weil das Ausführen von Skripten in diesem System verboten ist“ (perfekte Lösung)
Wenn ich Vue lerne und immer Webpack-Anweisungen ...
So implementieren Sie die Seiten-Screenshot-Funktion in JS
„Seiten-Screenshot“ ist eine Anforderung, die häu...
So implementieren Sie HTML, um zu erkennen, ob die Eingabe abgeschlossen ist, und den nächsten Inhalt automatisch einzufügen
Im vorherigen Artikel haben wir die einfache Erke...
Docker installiert und führt den RabbitMQ-Beispielcode aus
Ziehen Sie das Bild: [mall@VM_0_7_centos ~]$ sudo...
Detaillierte Erklärung der dynamischen Angular-Komponenten
Inhaltsverzeichnis Anwendungsszenarien So erreich...
JavaScript – Verwenden von Slots in Vue: Slot
Inhaltsverzeichnis Verwenden von Slots in Vue: Sl...
So implementieren Sie eine geplante Sicherung der CentOS MySQL-Datenbank
Das folgende Skript wird für die geplante Sicheru...
Virtueller vsftpd-Benutzer basierend auf MySql-Authentifizierung
Inhaltsverzeichnis 1. MySQL-Installation 1.2 Tabe...
So ändern Sie das Anfangskennwort eines Benutzers in mysql5.7
Wenn Benutzer MySQL-Datenbanken zum ersten Mal in...
Detaillierte Installation und Konfiguration von hadoop2.7.2 unter Ubuntu15.10
Im Internet und in vielen Büchern gibt es viele T...
2 Gründe, warum die HTML-CSS-Tag-Stileinstellung nicht funktioniert
1 CSS-Stil ohne Semikolon ";" 2 Tags sin...
Node-Skript realisiert automatische Anmelde- und Lotteriefunktion
Inhaltsverzeichnis 1. Einleitung 2. Vorbereitung ...
Detaillierte Erklärung des Prinzips der Docker-Image-Schichtung
Basisbild Das Basisbild hat zwei Bedeutungen: Ist...