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, in der Hoffnung, ein dreispaltiges Layout zu haben, bei dem die linke Spalte eine feste Breite erfordert und links angezeigt wird, die rechte Spalte eine feste Breite erfordert und rechts angezeigt wird und die Mitte Die Spalte muss zwischen der linken und rechten Spalte liegen. Die Mitte der Spalte passt sich automatisch an die Änderung des Abstands zwischen der linken und 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 dies zu erreichen. CSS bietet neben der Floating-Positionierung eine andere Methode Die Positionierungsmethode ist die absolute Positionierung, die mithilfe des Positionsattributs erreicht wird.
Position wird verwendet, um die Positionierungsmethode des Objekts festzulegen. Verfügbare Werte: statisch/absolut/relativ
Für jedes Objekt auf der Seite ist die Standardpositionseigenschaft statisch. Wenn Sie ein Objekt auf „position:absolute“ setzen, wird das Objekt aus dem Dokumentfluss ausbrechen und entsprechend seiner Position auf der gesamten Seite neu positioniert. Wenn Sie dieses Attribut verwenden, können Sie oben, rechts, unten und links, also die Abstandswerte in den vier Richtungen oben, rechts, unten und links, verwenden, um die spezifische Position des Objekts zu bestimmen CSS:
#layout {
Position:absolut;
oben:20px;
links:0px;
}
Wenn #layout position:absolute; verwendet, wird es zum absoluten Positionierungsmodus. Gleichzeitig ist es beim Festlegen von top:20px; immer 20px vom oberen Rand des Browserfensters entfernt, während left:0px; dass es vom oberen Rand des Browserfensters entfernt ist. Der linke Rand des Browsers beträgt 0 Pixel. .
Hinweis: Wenn ein Objekt auf „position:absolute“ eingestellt ist, wird es im Wesentlichen nicht von anderen Objekten getrennt, und es wird auch nicht durch die schwebende Positionierung anderer Objekte beeinflusst Bei der Positionierung schwebt das Objekt 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:
#links {
Hintergrundfarbe: #E8F5FE;
Rand: 1 Pixel durchgehend #A9C9E2;
Höhe: 400px;
Breite: 200px;
Position: absolut;
oben: 0px;
links: 0px;
}
#Rechts {
Hintergrundfarbe: #FFE7F4;
Rand: 1 Pixel durchgehend #F9B3D5;
Höhe: 400px;
Breite: 200px;
Position: absolut;
oben: 0px;
rechts: 0px;
}
Auf diese Weise wird die linke Spalte durch left: 0px; nahe am linken Rand angezeigt, während die rechte Spalte durch right: 0px angezeigt wird, sodass die rechte Spalte von rechts und die Mitte in; angezeigt wird In der Mitte werden normale CSS-Stile verwendet:
#center {
Hintergrundfarbe: #F2FDDB;
Rand: 1 Pixel durchgehend #A5CF3D;
Höhe: 400px;
Rand rechts: 202px;
Rand links: 202px;
}
Für #center müssen wir die Floating-Methode nicht festlegen. Wir müssen nur einen linken Rand festlegen und immer die Breite von #lef und #right beibehalten. Dadurch wird eine adaptive Breite von 202 Pixeln erreicht Die linke und rechte Seite haben eine adaptive Breite von 202 Pixel. Der Abstand ermöglicht lediglich die Anzeige von #links und #rechts in diesem Bereich und erfüllt somit die Anforderungen.