HTML+CSS-Div-Lösung bei Konflikten zwischen relativer und absoluter Breite

Div-Lösung bei Konflikten zwischen relativer und absoluter Breite

Zusammenfassung: Im Allgemeinen verwenden wir px, wenn wir die absolute Breite verwenden, und %, wenn wir die relative Breite verwenden. Was sollen wir aber tun, wenn wir sowohl die absolute als auch die relative Breite gleichzeitig verwenden?

Lassen Sie uns die heutigen Inhalte anhand eines Beispiels erklären:

1. Beantworten Sie die Fragen auf dem Bild
2. Versuchen Sie, eine Lösung bereitzustellen, bei der die Breite der Bildschirmbreite entspricht und das Layout ungefähr 1 ähnelt. Stellen Sie sicher, dass sich die relative Breite des mittleren Layouts nicht ändert, unabhängig davon, wie Sie die Breite des Browsers anpassen, und dass der Abstand zwischen den Rastern 10 Pixel beträgt.

Frage 1 ist sehr einfach und es gibt viele Lösungen, deshalb werde ich nicht ins Detail gehen.

Bei der Analyse von Frage 2 stellten wir fest, dass es zwei Hauptanforderungen gibt:
Relative Breite: Die relative Breite (Verhältnis) des Rasters bleibt unverändert Absolute Breite: Der absolute Abstand zwischen den Rastern bleibt unverändert

Wenn für Sie nur die relative Breite wichtig ist, ist es ganz einfach: Stellen Sie beispielsweise die Breite des linken Rasters auf 30 % und die Breite jedes Rasters auf der rechten Seite auf 70 % ein. Wenn für Sie nur die absolute Breite wichtig ist, ist es sogar noch einfacher: Stellen Sie den Abstand in der Mitte einfach auf 10 Pixel ein. Was aber, wenn Sie beides gleichzeitig befriedigen möchten? Muss ich width: (inherit-10px)*30% schreiben?
Offensichtlich nicht. Lassen Sie mich über meine Lösung sprechen (ich bin ein Neuling, wenn etwas ausgelassen wurde oder Sie eine bessere Lösung haben, korrigieren Sie mich bitte im Kommentarbereich!)

Schreiben Sie zuerst das allgemeine Box-Framework

<!-- Tiger's Code World-->
<!doctype html>
<html>
<Kopf>
    <title>Diskussion über relative Breite und absolute Breite</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</Kopf>
<Text>
    <div id="oben">
    </div>
    <div Klasse="Wrapper">
        <div id="links">
        </div>
        <div id="rechts">
        </div>
    </div>
    <div id="unten">
    </div>
</body>
</html>

Auf die Ober- und Unterbehälter gehe ich hier nicht näher ein. Ich werde nur über den Mittelteil sprechen.

Zunächst einmal ist klar, dass die Probleme der relativen Breite und der absoluten Breite nicht gleichzeitig gelöst werden können (1. Was diese Frage betrifft 2. Korrekturen sind willkommen)
Dann teilen wir das Problem auf: Lösen Sie zuerst die relative Breite, dann die absolute Breite, oder lösen Sie zuerst die absolute Breite, dann die relative Breite. Was diese Frage betrifft, ist Ersteres einfacher. Wie „teilen“ wir das Problem auf? ——Natürlich ist es das Container-Div!

Lassen Sie uns zuerst die relative Breite berechnen:
Wir führen A und C zusammen und beschreiben sie dann mit B unter Verwendung der relativen Breite.

Das ist ganz einfach, die Breite links beträgt 30% und die Breite rechts 70%
Wie lösen wir also das Layout im linken Container?
Lassen Sie uns zunächst darüber nachdenken: Können wir einen Container mit einem Raster fester Breite auf der linken Seite und einem Raster variabler Breite auf der rechten Seite erstellen? Dies ist natürlich die Navigationsleiste! Das ist ganz einfach, ich habe gerade eine Möglichkeit gefunden, es unten einzufügen:

#links{
    Höhe: 300px;
    schweben: links;
    Breite: 150px;
}

#Rechts{
    Höhe: 300px;
    Breite: automatisch;
    Rand links: 150px;
}

Würde das das Problem nicht sofort lösen?
Wenn Sie also das nächste Mal auf einen Konflikt zwischen relativen und absoluten Werten stoßen, verwenden Sie unbedingt div als leistungsstarkes Tool!

Natürlich müssen wir auch auf einige kleine Details achten, beispielsweise wie mit Randproblemen usw. umgegangen wird. Dies erfordert eine Anpassung der Höhe des äußeren Containers und des inneren Containers (der Unterschied beträgt 2 * Randbreite), und um den rechten Container an den linken anzupassen, muss ein weiteres Div innerhalb des rechten platziert werden.

Das Boxmodell stellt die grundlegende Fähigkeit des CSS-Layouts dar. Jeder muss ein tiefes Verständnis davon haben, bevor er es auf verschiedene Transformationen anwenden kann. Um diese Frage zu beantworten, müssen Sie die Beziehung zwischen Rand, Polsterung (obwohl sie in dieser Frage nicht verwendet wird), Rahmen und Div gut verstehen. Ich werde heute nicht im Detail darauf eingehen und das nächste Mal, wenn ich Zeit habe, darüber sprechen.

Ich habe meinen gesamten Code unten zu Ihrer Information eingefügt. Wenn Sie eine bessere Lösung haben, teilen Sie sie bitte im Kommentarbereich mit!

HTML:

<!Tiger's Code Welt>
<!doctype html>
<html>
<Kopf>
    <title>CSS-Layout-Übung</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</Kopf>
<Text>
    <div id="oben">
    </div>
    <div Klasse="Wrapper">
        <div id="links">
            <div Klasse = "innerright"></div>
            <div Klasse="inner"></div>
        </div>
        <div id="rechts">
            <div Klasse="inner"></div>
        </div>
    </div>
    <div id="unten">
    </div>
</body>
</html>

CSS:

/*Tigers Codewelt*/

/*Bei der Breite im Titel ist unklar, ob es sich um die Breite mit Rahmen und Rändern oder die Breite ohne Rahmen und Ränder handelt. Im Folgenden wird standardmäßig die Breite ohne Rahmen und Ränder verwendet*/


*{
    Rand: 0px;
    Polsterung: 0px;
    Rahmenbreite: 3px;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: schwarz;
}

html{
    Rand: 0;
    Polsterung: 0;
    Rahmenbreite: 0;
    Breite: 100 %;
}

Körper{
    Rand: 0;
    Polsterung: 0;
    Rahmenbreite: 0;
}

#Spitze{
    Rand: 10px;
    Höhe: 150px;
}

.Verpackung{
    Rand: 10px;
    Höhe: 300px;
    Breite: erben;
    Rahmenbreite: 0;
}

#links{
    Höhe: 300px;
    Breite: 30%;
    schweben: links;
    Rahmenbreite: 0;
}

#links .inner{
    Höhe: 294px;
    Breite: automatisch;
    Rand rechts: 10px;

}

#links .innerrechts{

    Höhe: 294px;
    Breite: 10px;
    schweben: rechts;
    Rahmenbreite: 0;
    Rand links: 10px;
}


#Rechts{
    Höhe: 300px;
    Breite: 70%;
    schweben: rechts;
    Rahmenbreite: 0;

}

#rechts .inner{
    Höhe: 294px;
    Breite: automatisch;
}


#unten{
    Rand: 10px;
    Höhe: 150px;
}

Damit ist dieser Artikel zur Lösung des Div-Problems bei Konflikten zwischen relativer und absoluter Breite in HTML+CSS abgeschlossen. Weitere Informationen zu Konflikten zwischen relativer und absoluter Breite in HTML+CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: So erzwingen Sie die vertikale Anzeige auf mobilen Seiten

>>: So verwenden Sie React zur Implementierung einer Bilderkennungs-App

Natives JavaScript zum Erzielen von Folieneffekten

HTML+CSS-Div-Lösung bei Konflikten zwischen relativer und absoluter Breite

Natives JavaScript zum Erzielen von Folieneffekten

Mobiles Internet-Zeitalter: Responsive Webdesign ist zum allgemeinen Trend geworden

js Array fill() Füllmethode

Erstellen eines sekundären Menüs mit JavaScript

MySQL implementiert Beispielcode, um doppelte Hinzufügungen beim Hinzufügen eines Einkaufswagens zu verhindern

CSS fängt die Zeichenfolge mit der angegebenen Länge automatisch ab und zeigt das Ende an ... Unterstützt den FF-Browser

MySQL-Datenbank-JDBC-Programmierung (Java stellt eine Verbindung zu MySQL her)

Grundlegende Anwendungsbeispiele für Listener in Vue

MySQL-Triggersyntax und Anwendungsbeispiele

CSS-Stil zurücksetzen und löschen (damit verschiedene Browser den gleichen Effekt anzeigen)

Artikel empfehlen

Installieren und Bereitstellen von Java8 und MySQL unter CentOS7

So deaktivieren Sie Webseitenstile mit dem Webentwickler von Firefox

Detaillierte Erklärung der jQuery-Kettenaufrufe

Das kürzeste JS, um festzustellen, ob es sich um IE6 handelt (IE-Schreibmethode)

JDBC-Erkundung SQLException-Analyse

So verwenden Sie die JSZip-Komprimierung in CocosCreator

Lösung für das Problem der Zeilenhöhe der Elementtabellenkopfzeile

Praktische Aufzeichnung der MySQL 5.6 Master-Slave-Fehlerberichterstattung

JS implementiert die Drag- und Platzhalterfunktionen von Elementen

Beispielcode für HTML-Listenfeld, Textfeld und Dateifeld

Detaillierte Erklärung der Schleifenverwendung in Javascript-Beispielen

So definieren Sie Datenbeispiele in Vue

Grafisches Tutorial zur Installation und Konfiguration von Ubuntu 18.04 MySQL 8.0

Windows 10 1903 Fehler 0xc0000135 Lösung [empfohlen]

Detaillierte Erklärung des Loop-Formularelementbeispiels in Vue