Beispiel für die Umsetzung eines 2-spaltigen Layouts in HTML (links feste Breite, rechts adaptive Breite)
|
HTML implementiert ein 2-spaltiges Layout mit fester Breite links und adaptiver Breite rechts Implementierung 1:
<Stil>
Textkörper, html{padding:0; margin:0;}
//Verwende gemäß der CSS-Positionierung eine schwebende oder absolute Positionierung, damit das Blockelement auf der linken Seite aus dem normalen Dokumentfluss herausragt und neben dem Blockelement auf der rechten Seite platziert werden kann. div:nth-of-type(1){
float: left; //Float verwenden// postion: absolute; //Absolute Positionierung verwenden// top: 0;
// links: 0;
Breite: 300px;
Höhe: 200px;
Hintergrund: rot;
}
// [Elemente auf Blockebene füllen standardmäßig automatisch die Breite des übergeordneten Elements und belegen eine Zeile]
//Derzeit: Breite des rechten Blockelements = Breite des übergeordneten Elements div:nth-of-type(2){
// Setzen Sie den linken Rand auf die Breite des linken Blockelements.
Rand links: 300px;
// Jetzt: die Breite des rechten Blockelements = Breite des übergeordneten Elements - linker Rand
Höhe: 220px;
Hintergrund: blau;
}
</Stil>
<html>
<div>div1</div>
<div>div2</div>
</html> 1) Vor dem Setzen des linken Rands
2) Nach dem Setzen des linken Rands
Implementierung 2:
<Stil>
Textkörper, html{padding:0; margin:0;}
//Verwende gemäß der CSS-Positionierung eine schwebende oder absolute Positionierung, um das Blockelement links aus dem normalen Dokumentfluss herauszuheben div:nth-of-type(1){
float: left; //Float verwenden// postion: absolute; //Absolute Positionierung verwenden// top: 0;
// links: 0;
Breite: 300px;
Höhe: 200px;
Hintergrund: rot;
}
// FC ist ein normaler (regulärer) Dokumentfluss, ein Formatierungskontext, ein Rendering-Bereich auf der Seite und verfügt über eine Reihe von Rendering-Spezifikationen. BFC ist ein Blockformatierungskontext.
// Verwenden Sie den BFC-Formatierungskontext auf Blockebene, um einen isolierten, unabhängigen Container zu erstellen div:nth-of-type(2){
//Ändern Sie den Überlaufwert auf „nicht sichtbar“, wodurch BFC ausgelöst wird.
Überlauf: versteckt;
Höhe: 220px;
Hintergrund: blau;
}
</Stil>
<html>
<div>div1</div>
<div>div2</div>
</html>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. |
<<: Ein Beispiel zur Optimierung eines Projekts nach Abschluss des Vue-Projekts
>>: HTML5+CSS3-Codierungsstandards
Artikel empfehlen
Zwei Möglichkeiten zum Verwalten von Volumes in Docker
Im vorherigen Artikel habe ich die Grundkenntniss...
Beschreiben Sie kurz, wie Sie das Tomcat-Image installieren und das Webprojekt in Docker bereitstellen
1. Installieren Sie Tomcat 1. Suchen Sie das Tomc...
So implementieren Sie Linux Deepin, um redundante Kernel zu löschen
Im vorherigen Artikel wurde beschrieben, wie man ...
Fehler MySQL-Tabelle 'performance_schema...Lösung
Die Testumgebung ist mit MariaDB 5.7 eingerichtet...
Vue integriert Tencent TIM Instant Messaging
In diesem Artikel wird hauptsächlich die Integrat...
Detaillierte Erklärung zum Importieren/Exportieren von MySQL-Daten im Docker-Container
Vorwort Wir alle wissen, dass der Import und Expo...
Detaillierte Erläuterung des Docker-Arbeitsmodus und -Prinzips
Wie in der folgenden Abbildung dargestellt: Wenn ...
JavaScript zum Erzielen eines einfachen Lupeneffekts
In einem großen Kästchen befindet sich ein Bild. ...
Wenn ich eine Eigenschaft in Vue-Daten zufällig ändere, wird die Ansicht aktualisiert?
Interviewer: Haben Sie den Quellcode von Vue gele...
Flex-Layout erreicht feste Anzahl von Zeilen pro Zeile + adaptives Layout
Dieser Artikel stellt das Flex-Layout vor, um ein...
Lassen Sie uns ausführlich über das Prinzip und die Implementierung von new in JS sprechen
Inhaltsverzeichnis Definition Konstruktorkörper s...
Docker-Container greift auf MySQL-Operationen des Hosts zu
Hintergrund: Es gibt ein Flask-Projekt, das eine ...
MySQL NULL-Datenkonvertierungsmethode (unbedingt lesen)
Wenn Sie MySQL zum Abfragen der Datenbank verwend...
Detaillierte Erläuterung des primitiven Datentyps Symbol in JavaScript
Inhaltsverzeichnis Einführung Beschreibung Namens...
So installieren und implementieren Sie einen FTP-Image-Server unter Linux
Lesen Sie das Tutorial zum Einrichten eines FTP-S...