Heim >Web-Frontend >CSS-Tutorial >CSS-Layout schwebend (1)
CSS-Layout schwebend (1)
- 黄舟Original
- 2016-12-17 11:48:431276Durchsuche
CSS-Floating war schon immer ein deprimierendes Problem, insbesondere wenn es viele Floating-Spalten gibt. Aber in der Tat, solange Sie das Floating einer zweispaltigen Struktur verstehen, werden Sie es tun Keine Panik mehr beim Schweben, denn das Schweben nach links und rechts einer zweispaltigen Struktur ist das grundlegendste Schweben, und es ist auch die Grundlage für mehr Schweben. Das Schweben von drei Spalten, vier Spalten usw. basiert alle darauf .
Werfen wir einen Blick auf einige gängige CSS-Zweispalten-Floats. Der CSS-Code ist wie folgt zu finden:
Feste Breite auf der linken Seite und adaptive auf der rechten Seite:
#a{float:left; width:200px;background:#aaa;}
#b{background:#f00;}
Wenn Sie eine feste Breite auf der linken Seite und eine automatische Breite auf der rechten Seite benötigen, müssen Sie nur das a-Objekt so einstellen, dass es nach links schwebt. Standardmäßig nimmt das b-Objekt die gesamte Breite des Bildschirms ein Da a schwebend bleibt und eine Breite von 200 PX einnimmt, befindet sich das b-Objekt automatisch hinter a.
Natürlich gibt es dabei ein Problem, das heißt, wenn der Inhalt auf der linken Seite höher ist als der auf der rechten Seite, kann die Höhe auf der rechten Seite nicht entsprechend erhöht werden, und wenn der Inhalt auf der rechten Seite höher ist als auf der rechten Seite links wird die Höhe rechts nicht entsprechend erhöht. Der Inhalt fließt an den unteren Rand des Inhalts auf der linken Seite.
Eine Möglichkeit, dieses Problem zu lösen, besteht darin, einen Float für b festzulegen. Natürlich wird kein rechter Float festgelegt, wenn der Inhalt auf der rechten Seite kleiner ist Die Breite einer Zeile, die Mitte der linken und rechten Seite, wird angezeigt. Hintergrund:#f00; float:right;}
Wenn b auf left float gesetzt ist, kann das Problem des Leerraums in der Mitte gelöst werden, aber auf die gleiche Weise, wenn der Inhalt des b-Objekts nicht für die Breite von ausreicht In einer Zeile erscheint auf der rechten Seite ein Leerzeichen:
#b{background:#f00; float:left;}
Natürlich gibt es eine andere Lösung, die beide Enden hat, nämlich die Position des b-Objekts von links aus festzulegen. Dies kann den Zweck des Floatens erreichen und auch das Problem lösen viel Inhalt im b-Objekt fließt in a.
margin-left:200px;}
#a{background:#f00;margin-left:200px;}
Natürlich können Sie auch CSS-Stile verwenden, um die schwebende Reihenfolge anzupassen, ohne die HTML-Struktur zu ändern ist auch einer der Vorteile von CSS, das heißt, Sie können die Änderung der Seite abschließen, ohne die ursprüngliche HTML-Struktur zu ändern: #a{float:left;background:#aaa;}
#b{background:#f00;
margin-left:200px;}