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

Absatzlayout und Zeilenumbrüche in HTML-Webseiten

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

Absatzlayout und Zeilenumbrüche in HTML-Webseiten

Grundlegende Verwendung und Beispiele von yum (empfohlen)

Detaillierte Analyse der MySQL MDL-Metadatensperre

12 nützliche Array-Tricks in JavaScript

Der komplette Prozess der iptables-Regeln in Docker geht nach dem Neustart von iptables verloren

Lösung für die Navicat Premier-Remoteverbindung zum MySQL-Fehler 10038

Zusammenfassung von 11 erstaunlichen Best Practices für die Refaktorierung von JavaScript-Code

Lösen Sie das Problem der Inkonsistenz zwischen MySQL-Zeit und Systemzeit in Docker

So verwenden Sie Übersetzung und Übergang in CSS3

Zusammenfassung verschiedener Methoden zur JS-Datentyperkennung

Artikel empfehlen

JavaScript-Canvas zum Erzielen von Regentropfeneffekten

Die 7 besten VSCode-Erweiterungen für Vue-Entwickler

Detailliertes Tutorial zum Anpassen des Installationspfads der MySQL-Version 5.7.18 (Installation von Binärpaketen)

Bringen Sie Ihnen bei, wie Sie die rekursive Methode von MySQL8 verwenden

So exportieren Sie MySQL-Abfrageergebnisse in CSV

Detaillierte Erläuterung der MySQL-Protokoll- und Sicherungs- und Wiederherstellungsprobleme

Mysql 8.0.18 Hash-Join-Test (empfohlen)

So testen Sie die maximale Anzahl von TCP-Verbindungen in Linux

Ausführliche Erklärung des Sperrmechanismus in MySQL

Verständnis und Anwendungsszenarien von Enumerationstypen in TypeScript

Lösung für das Problem der adaptiven Höhe und Breite der CSS-Anzeigetabelle

Detaillierte Erklärung der obligatorischen und impliziten Konvertierung von Typen in JavaScript

Auszeichnungssprache - Phrasenelemente

Importieren von CSS-Dateien unter Verwendung von Beurteilungsbedingungen

Zusammenfassung der Methoden zum Überprüfen, ob der Port in Linux geöffnet ist