HTML-adaptives Layout links, zentriert und rechts (mithilfe des Calc-CSS-Ausdrucks)

Im neuesten HTML-Standard gibt es einen Calc-CSS-Ausdruck, mit dem wir das Layout berechnen können.
Es wird jedoch im alten IE nicht unterstützt. Um alle Browser zu unterstützen, wird hier js verwendet.
Screenshot:

Code:

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN">
<html>
<Kopf>
<Titel>MeinHtml.html</Titel>
<meta http-equiv="Schlüsselwörter" content="Schlüsselwort1,Schlüsselwort2,Schlüsselwort3">
<meta http-equiv="description" content="das ist meine Seite">
<meta http-equiv="Inhaltstyp" Inhalt="text/html; Zeichensatz=UTF-8">
<Skript>
var links, Mitte, rechts, Breite;
fenster.onload = funktion(){
links=$('links');
Mitte=$('Mitte');
rechts=$('rechts');
bei Größenänderung();
};
Fenster.onresize = Funktion() {
versuchen {
Breite = Dokument.Body.Clientbreite;
center.style.width = (Breite – linke Clientbreite – rechte Clientbreite – 0) + "px";
}fangen(e){
//Wenn es kleiner als 0 ist, wird ein Fehler gemeldet
}
};
Funktion $(id){
gibt document.getElementById(id) zurück;
}
</Skript>
<Stil>
Textkörper,html{
Höhe: 100 %;
Rand: 0px;
Polsterung: 0px;
Überlauf: versteckt;
}
#links,#Mitte,#rechts
Breite: 200px;
Höhe: 100px;
Hintergrundfarbe: RGB (34,124,134);
schweben: links;
Höhe: 100 %;
}
#Center{
Hintergrundfarbe: rot;
}
</Stil>
</Kopf>
<Text>
<div id="links"></div>
<div id="center"></div>
<div id="rechts"></div>
</body>
</html>

<<: Vue erzielt den Top-Effekt durch V-Show

>>: MySQL praktische Fensterfunktion SQL-Analyse Klasse Testergebnisse und Lebenshaltungskosten Studenten

Mobile Frontend-Anpassungslösung (Zusammenfassung)

Detaillierte Erläuterung von vite + ts zum schnellen Erstellen von Vue3-Projekten und zur Einführung verwandter Funktionen

Inhaltsverzeichnis vite Bauen Konfiguration vite....

HTML-adaptives Layout links, zentriert und rechts (mithilfe des Calc-CSS-Ausdrucks)

Mobile Frontend-Anpassungslösung (Zusammenfassung)

CSS-Code zur Unterscheidung von IE8/IE9/IE10/IE11 Chrome Firefox

So richten Sie den Start einer JAR-Anwendung unter CentOS7 ein

Die Verwendung und Methoden von async und await in JavaScript

Standardtypen für generische TypeScript-Parameter und neue Option zur strikten Kompilierung

MySQL-Update-Fall Update-Feldwert ist keine feste Operation

So verwenden Sie weniger im WeChat-Applet (optimale Methode)

Detaillierte Erklärung der Verwendung und des Unterschieds zwischen nohup und & in Linux

Front-End-Leistungsoptimierung – die Schwachstellen, über die Front-End-Ingenieure sprechen müssen

Detaillierte Erläuterung der Nginx-Zugriffsbeschränkungskonfiguration

Artikel empfehlen

Vorschläge zur Optimierung der Webseiten-Kopfzeile

JavaScript zur Implementierung der umfassendsten Codeanalyse eines einfachen Karussells (objektorientiert ES6)

Detaillierte Erläuterung der Implementierungsprinzipien von call, apply und bind in JavaScript

Tutorial-Analyse zur Installation und Nutzung des Linux-Leistungsüberwachungstools nmon

Detaillierte Erläuterung von vite + ts zum schnellen Erstellen von Vue3-Projekten und zur Einführung verwandter Funktionen

Installieren Sie das komprimierte MySQL5.7-Paket schnell unter Windows

Beispielcode für die Verwendung von Nginx zur Implementierung einer 301-Weiterleitung zum https-Stammdomänennamen

Nginx Reverse Proxy Springboot JAR-Paket-Prozessanalyse

js, um eine einfache Lotteriefunktion zu erreichen

uniapp implementiert Datums- und Zeitauswahl

Detaillierte Erklärung zur Verwendung des Arguments-Objekts in JavaScript

So implementieren Sie den Selbststart eines Docker-Containers

Zusammenfassung der Probleme mit der horizontalen und vertikalen Zentrierung in HTML

Verwenden Sie CSS3s webkit-box-reflect geschickt, um verschiedene dynamische Effekte zu erzielen

So richten Sie die Swap-Partition SWAP in Linux 7.7 ein