Unter Verwendung der schwimmenden Positionierung können die feste Breite und Anpassungsfähigkeit von einer Spalte bis zu mehreren Spalten einfach abgeschlossen werden, einschließlich der festen Breite von drei Spalten. Hier haben wir eine neue Anforderung vorgelegt, in der Hoffnung, ein dreispaltiges Layout zu haben, bei dem die linke Spalte eine feste Breite benötigt und links angezeigt wird, die rechte Spalte eine feste Breite benötigt und rechts und die Mitte angezeigt wird Die Spalte muss in der linken Spalte und der rechten Spalte sein. Dadurch wird eine neue Anforderung für das Layout vorgelegt, und das prozentuale Attribut kann einfach nicht die Berechnung der Prozentsätze der linken und rechten Spalten berücksichtigen Wird für die mittlere Spalte für die Breite verwendet, verwendet sie die Breite des Browserfensters und nicht den mittleren Abstand zwischen den linken und rechten Spalten. Daher müssen wir dieses Problem überdenken. #layout { Wenn #Layout die Position verwendet, wird der Absolute -Positionsmodus. Der linke Rand ist 0px. . Auf diese Weise wird die linke Spalte auf der linken Seite der linken Kante angezeigt, während die rechte Spalte rechts rechts angezeigt wird: 0PX; Für #Center müssen wir seine schwimmende Methode nicht mehr festlegen. Links und rechte Seiten können #Left und #Right in diesem Bereich angezeigt werden, wodurch die Anforderungen erfüllt werden.
Absolute Positionierung
Vor Beginn eines solchen dreispaltigen Layouts ist es notwendig, eine neue Positionierungsmethode zu verstehen - absolute Positionierung. Die vorherige Gleitpositionierungsmethode wird hauptsächlich vom Browser nach dem Inhalt des Objekts automatisch angepasst. Die Positionierung und die absolute Positionierung werden unter Verwendung von Positionsattribut erreicht.
Position verwendet, um die verfügbaren Werte für die Positionierung des Objekts festzulegen: statisch/absolut/relativ
Für jedes Objekt auf der Seite ist die Standardpositionseigenschaft statisch. Wenn Sie das Objekt auf Position setzen: Absolute, wird das Objekt vom Dokumentstrom getrennt und gemäß dem Ort der gesamten Seite neu positioniert. Wenn Sie diese Eigenschaft verwenden, können Sie oben, rechts, unten, links, dh den Entfernungswert der vier Richtungen der oberen, rechten, unteren und linken Seite verwenden, um die spezifische Position des Objekts zu bestimmen.
Position: absolut;
Top: 20px;
links: 0px;
}
Hinweis: Wenn ein Objekt auf Position gesetzt ist: Absolut; Absolute Positionierung schwebt das Objekt wie eine Ebene auf der Webseite.
Nach absolut positionieren wird das Objekt nicht mehr mit der schwimmenden Beziehung in der Seite berücksichtigt.
In diesem Fall kann die Verwendung der absoluten Positionierung das Problem lösen, das wir gut angelegt haben. In ähnlicher Weise verwenden wir 3 Divs, um unsere drei Säulenstrukturen zu bilden:
#links {
Hintergrundfarbe: #e8f5fe;
Grenze: 1PX Solid #A9C9E2;
Höhe: 400px;
Breite: 200px;
Position: absolut;
Oben: 0px;
links: 0px;
}
#Rechts {
Hintergrundfarbe: #ffe7f4;
Grenze: 1PX Solid #f9b3d5;
Höhe: 400px;
Breite: 200px;
Position: absolut;
Oben: 0px;
Rechts: 0px;
}
#Center {
Hintergrundfarbe: #f2fddb;
Grenze: 1PX Solid #A5CF3D;
Höhe: 400px;
Rand-Rechts: 202px;
Rand-Links: 202px;
}