Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So lösen Sie das Problem von float:right rechtsbündig ausgerichteten Elementen in CSS, die umbrochen werden und sich nicht in derselben Zeile befinden

不言
Freigeben: 2018-06-21 17:35:23
Original
3110 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich vor, wie man das Problem von float:right rechtsbündigen Elementen in CSS löst, die nicht in derselben Zeile liegen. Jetzt kann ich es mit Ihnen teilen beziehen Sie sich darauf

Wenn Sie Float zum Festlegen der rechtsbündigen Anzeige verwenden, stellen wir normalerweise fest, dass die rechtsbündigen Elemente umbrochen werden, sodass sich die linken und rechten Elemente nicht in derselben Zeile befinden. Hier sind zwei Lösungen Damit Sie ähnliche Situationen lösen können, können wir in CSS normalerweise ein Element links oder rechts anzeigen. Ausgerichtete Anzeige, auf die wir normalerweise stoßen, rechtsbündig Die Elemente werden umbrochen, sodass sich die linken und rechten Elemente nicht in derselben Zeile befinden. Wir können dieses Problem auf folgende Weise lösen:

Die erste Lösung :

Vertauschen Sie die linken und rechten Elemente. Setzen Sie beispielsweise einfach das Datum vor den Titel und kehren Sie es um.

Die zweite Lösung:

Float:left auch auf der linken Seite hinzufügen.

CSS-Float-Definition und -Verwendung

Das Float-Attribut definiert, in welche Richtung ein Element schwebt. In der Vergangenheit wurde diese Eigenschaft immer auf Bilder angewendet, wodurch der Text um das Bild herum umbrochen wurde. In CSS kann jedoch jedes Element schwebend dargestellt werden. Ein schwebendes Element erstellt eine Box auf Blockebene, unabhängig von der Art des Elements.

Bei schwebenden, nicht ersetzten Elementen geben Sie eine explizite Breite an; andernfalls werden sie so schmal wie möglich sein

Auf „Float“ folgen häufig die Attributwerte left, right, none

Float: keine Float nicht verwenden

Float:left Float nach links
Float:right Float nach rechts

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass dies der Fall sein wird Hilfreich für das Lernen aller. Bitte achten Sie auf weitere verwandte Inhalte auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie das CSS-Attribut nth-child(n), um das n-te untergeordnete Element abzugleichen und auszuwählen


So lösen Sie das Problem, dass, wenn Firefox offsetHeight verwendet, um die Höhe eines Divs zu erhalten, diese 0 ist


Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem von float:right rechtsbündig ausgerichteten Elementen in CSS, die umbrochen werden und sich nicht in derselben Zeile befinden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage