CSS-Layout schwebend (1)-CSS-Tutorial-php.cn

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:

CSS float

Start me It's links, vielleicht später rechts

Zuerst war ich rechts, aber dann lief ich vielleicht nach links

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:

#a{float:left; width:200px;}

#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;}

Feste Breite rechts und automatisch links:

Dasselbe Prinzip wie feste Breite links und automatisch rechts, feste Breite rechts und automatisch auf der linken Seite kann auch erreicht werden:

#a{background:#f00;margin-left:200px;}

#b{float:right:200px; Hintergrund:#aaa;}

Wenn Sie dem obigen Code folgen, werden Sie feststellen, dass dieser Code kein Rechtsschweben erreichen kann. Das b-Objekt wird unter dem a-Objekt angezeigt und nicht wie erwartet auf der rechten Seite. Weit links und automatischer Effekt. Aufgrund der HTML-Struktur sollten Floating-DIVs vor Nicht-Floating-DIVs erscheinen. Das heißt, wenn der obige Code befolgt wird, gilt

… und

… sollte umgekehrt sein:

Zuerst war ich rechts, aber dann lief ich vielleicht nach links

Ich habe links angefangen und dann vielleicht rechts

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;}

Das Obige ist der schwebende Inhalt des CSS-Layouts. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Verwandte Etiketten：

CSS布局，浮动

Quelle：php.cn

Vorheriger Artikel：CSS-Praxis-Tutorial (3) Nächster Artikel：CSS-Layout schwebend (2)

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors