Einführungs-Tutorial 8 zum CSS-Webseitenlayout: Drei Spalten mit schwebender mittlerer Spaltenbreite adaptiv_Grundlegendes Tutorial

Mit der schwebenden Positionierungsmethode können die feste Breite und die Anpassung von einer Spalte an mehrere Spalten grundsätzlich problemlos durchgeführt werden, einschließlich der festen Breite von drei Spalten. Hier erhalten wir eine neue Anforderung. Die linke Spalte in der Basis erfordert eine feste Breite und wird auf der rechten Seite angezeigt Die mittlere Spalte muss zwischen der linken und der rechten Spalte liegen. Die Mitte der rechten Spalte passt sich automatisch an die Änderung des Abstands zwischen der linken und der rechten Spalte an. Dies stellt eine neue Anforderung an das Layout dar und kann nicht einfach durch die Verwendung von Float-Attributen und Prozentattributen erreicht werden. CSS unterstützt derzeit keine Prozentberechnungen, die genau genug sind, um den von der linken und rechten Spalte belegten Platz zu berücksichtigen Verwenden Sie 100 % für die mittlere Spalte. Für die Breite wird die Breite des Browserfensters anstelle des mittleren Abstands zwischen der linken und der rechten Spalte verwendet. Daher müssen wir dieses Problem überdenken.

Absolute Positionierung
Bevor Sie mit einem solchen dreispaltigen Layout beginnen, müssen Sie eine neue Positionierungsmethode verstehen – die absolute Positionierung. Die bisherige Floating-Positionierungsmethode ermöglicht es dem Browser hauptsächlich, die Floating-Richtung automatisch an den Inhalt des Objekts anzupassen. Wenn diese Methode jedoch die Positionierungsanforderungen nicht erfüllen kann, ist eine neue Methode erforderlich, um neben der Floating-Positionierung eine andere Methode bereitzustellen Die Positionierungsmethode ist die absolute Positionierung, die mithilfe des Positionsattributs erreicht wird.

Position Wird verwendet, um die Positionierungsmethode von Objekten festzulegen. Verfügbare Werte: statisch/absolut/relativ

Für jedes Objekt auf der Seite ist das Standardpositionsattribut statisch.
Wenn das Objekt auf „position:absolute“ eingestellt ist, wird das Objekt entsprechend der Position der gesamten Seite neu positioniert. Bei Verwendung dieses Attributs können Sie die Abstandswerte „oben“, „rechts“, „unten“ und „links“ verwenden ​​in den vier Richtungen oben, rechts, unten und links. Um die spezifische Position des Objekts zu bestimmen, sehen Sie sich das folgende CSS an:

#layout {
position:absolute;
top :20px;
left:0px;
wenn# Wenn das Layout position:absolute; verwendet, wird es gleichzeitig zu einem absoluten Positionierungsmodus immer 20 Pixel vom oberen Rand des Browserfensters entfernt sein, und left:0px; stellt sicher, dass es 0 Pixel vom linken Rand des Browsers entfernt ist.

Hinweis: Wenn ein Objekt auf „position:absolute“ eingestellt ist, wird es im Wesentlichen nicht von anderen Objekten getrennt und auch nicht durch die schwebende Positionierung anderer Objekte beeinflusst In gewisser Weise schwebt das Objekt nach Verwendung der absoluten Positionierung wie eine Ebene auf der Webseite.

Nachdem das Objekt absolut positioniert ist, wird seine schwebende Beziehung zur Seite nicht mehr berücksichtigt. Sie müssen nur die Werte für die obere, rechte, untere und linke Richtung des Objekts festlegen.

In diesem Fall kann die Verwendung der absoluten Positionierung das von uns angesprochene Problem gut lösen. Verwenden Sie auf ähnliche Weise 3 Divs, um unsere dreispaltige Struktur zu bilden:

Kopieren Sie den Code Der Code lautet wie folgt:

#left {
Hintergrundfarbe: #E8F5FE;
Grenze: 1px fest #A9C9E2;
Breite: 200px; ;
oben: 0px;
#rechts {
Hintergrundfarbe: #FFE7F4;
Höhe: 4 00px ;
Breite: 200px;
oben: 0px;
rechts: 0px; Die Spalte wird von links angezeigt: 0px; wird am linken Rand angezeigt, und die rechte Spalte wird von rechts angezeigt: 0px; sodass die rechte Spalte von rechts angezeigt wird und die Spalte #center in der Mitte angezeigt wird Verwenden Sie den gewöhnlichen CSS-Stil:





Code kopieren


Der Code lautet wie folgt:

#center {
Hintergrundfarbe: #F2FDDB;

Höhe: 400px; Rand-links: 202px; >}
Pour #center, nous n'avons pas besoin de définir sa méthode flottante. Nous devons seulement lui laisser une marge gauche et toujours conserver la largeur de #lef et #right. Cela permet d'obtenir une largeur adaptative de 202 px des deux côtés. , et les marges gauche et droite sont La distance entre les deux côtés est juste suffisante pour que #left et #right soient affichés dans cet espace, répondant ainsi à l'exigence.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Trois colonnes de largeur fixe gauche et droite milieu adaptatif-AA25.CN</title> <style> body{ margin:0px; } #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; height: 400px; width: 200px; position: absolute; top: 0px; left: 0px; } #center { background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 400px; margin-right: 202px; margin-left: 202px; } #right { background-color: #FFE7F4; border: 1px solid #F9B3D5; height: 400px; width: 200px; position: absolute; top: 0px; right: 0px; } </style> <div id="left">Colonne de gauche</div> <div id="center">Colonne du milieu</div>