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

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

Artikel empfehlen

Detaillierte Erläuterung von MySQL zum Abrufen statistischer Daten für jeden Tag und jede Stunde eines bestimmten Zeitraums

Erhalten Sie tägliche Statistiken Wenn Sie ein Pr...

Detaillierte Erläuterung des SVN-Ein-Klick-Installations-Shell-Skripts unter Linux

#!/bin/bash #SVN herunterladen yum -y installiere...

React verwendet Routing, um zur Anmeldeoberfläche umzuleiten

Im vorherigen Artikel haben wir nach der Konfigur...

mysql 5.7.5 m15 winx64.zip Installations-Tutorial

So installieren und konfigurieren Sie mysql-5.7.5...

JS implementiert das Schere-Stein-Papier-Spiel

In diesem Artikelbeispiel wird der spezifische JS...

Tutorial zur Installation und Verwendung der verteilten Ceph-Software unter Linux

Inhaltsverzeichnis Vorwort 1. Grundlegende Umgebu...

So stellen Sie Gitlab schnell mit Docker bereit

1. Laden Sie das Gitlab-Image herunter Docker-Pul...

Verwenden von Vue zum Implementieren einer Timerfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Datenbankübergreifende Assoziationsabfragemethode in MySQL

Geschäftsszenario: Abfragen von Tabellen in versc...

Einführung in die Apache-Bereitstellung von https in der Kryptografie

Inhaltsverzeichnis Zweck Experimentelle Umgebung ...

So installieren Sie suPHP für PHP5 auf CentOS 7 (Peng Ge)

Standardmäßig wird PHP unter CentOS 7 als Apache ...

Ausführliche Erläuterung der Mysql-Deadlock-Anzeige und Deadlock-Entfernung

Vorwort Vor einiger Zeit ist bei mir ein MySQL-De...

Detaillierte Erklärung zweier zu beachtender Punkte bei vue3: Setup

Inhaltsverzeichnis In vue2 In vue3 Hinweise zur E...

Verwendung des Linux-Lesebefehls

1. Befehlseinführung Der Lesebefehl ist ein integ...

So konfigurieren Sie die maximale Anzahl von Dateien, die von jedem Nginx-Prozess geöffnet werden können

1. Überprüfen Sie die maximale Anzahl geöffneter ...