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
Tutorial: Nginx-Reverse-Proxy-Konfiguration zum Entfernen von Präfixen
Wenn Sie nginx als Reverse-Proxy verwenden, könne...
Informationen zum dynamischen Hinzufügen von Routen basierend auf Benutzerberechtigungen in Vue
Zeigen Sie je nach Benutzerberechtigung unterschi...
MySQL Master-Slave-Prinzip und Konfigurationsdetails
MySQL Master-Slave-Konfiguration und Prinzip, zu ...
Grafische Erklärung des MySQL-Abfragecaches
Inhaltsverzeichnis 1. Prinzipübersicht Query Cach...
Der Docker-Container wird direkt ausgeführt, um den öffentlichen IP-Vorgang über Ping abzurufen
Holen Sie sich die lokale öffentliche IP-Adresse ...
Detaillierte Schritte zur Installation von mysql5.7.18 auf dem Mac
1. Werkzeuge Wir benötigen jetzt zwei Tools: MySQ...
Methoden und Schritte zum Bereitstellen mehrerer War-Pakete in Tomcat
1 Hintergrund JDK1.8-u181 und Tomcat8.5.53 wurden...
So verwenden Sie MQTT im Uniapp-Projekt
Inhaltsverzeichnis 1. Referenz-Plugins im Uniapp ...
So installieren Sie PostgreSQL und PostGIS mit yum auf CentOS7
1. Aktualisieren Sie die Yum-Quelle Die PostgreSQ...
Das WeChat-Applet ermöglicht horizontales und vertikales Scrollen
In diesem Artikelbeispiel wird der spezifische Co...
Docker verwendet das Tool nsenter, um in den Container zu gelangen
Bei der Verwendung von Docker-Containern ist es b...
Detaillierte Erklärung der Front-End-Sicherheit: JavaScript-Anti-HTTP-Hijacking und XSS
Inhaltsverzeichnis HTTP-Hijacking, DNS-Hijacking ...
MySQL InnoDB-Überwachung (Systemebene, Datenbankebene)
MySQL InnoDB-Überwachung (Systemebene, Datenbanke...
Detaillierte Erklärung zur Verwendung der React-Listenleiste und der Warenkorbkomponenten
In diesem Artikelbeispiel wird der spezifische Co...
Installation und Verwendung der Ubuntu 18.04 Serverversion (Bild und Text)
1 Schritte zur Systeminstallation Betriebssystemv...