Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie schreibe ich links schwebendes CSS?

anonymity
Freigeben: 2019-05-28 10:19:21
Original
7631 Leute haben es durchsucht

Float-Attribut im CSS-Stil wird verwendet, um das schwebende Layout von Beschriftungsobjekten festzulegen (z. B.

Beschriftungsfeld, Beschriftung, Beschriftung, Beschriftung und andere HTML-Beschriftungen). ), Floating ist das, was wir Beschriftungsobjekte nennen, die nach links schweben (float:left) und nach rechts schweben (float:right).

Wie schreibe ich links schwebendes CSS?

Was bedeutet Float?

float bedeutet schwebend, und ins Chinesische übersetzt bedeutet es auch schwebend.

Die Rolle von Float

Definieren Sie Float (Float) über CSS, damit der Ebenenblock im Div-Stil nach links oder rechts (lean) schweben kann.

Auf Float folgen oft die Attributwerte left, right, none

Float:none Kein Floating verwenden

Float:left Float nach links

Float:right Right float

Float-Syntax:

Float: none | left |right

Parameterwert:

keine: Das Objekt schwebt nicht

links: Objekt schwebt auf der linken Seite

rechts: Objekt schwebt auf der rechten Seite

Fall:

Wir richten eine Box ein. Es gibt zwei schwebende Boxen, eine rechts und eine links. Um den CSS-Floating-Layouteffekt intuitiv zu sehen, legen wir eine bestimmte Breite, Höhe und einen bestimmten Rand für die beiden Boxen fest .

1. Haupt-HTML-Code-Snippet:

<div class="divcss5"> 
    <div class="divcss5_left">布局靠左浮动</div> 
    <div class="divcss5_right">布局靠右浮动</div> 
    <div class="clear"></div><!-- html注释:清除float产生浮动 --> 
</div>
Nach dem Login kopieren
2、css代码片段:
.divcss5{ width:400px;padding:10px;border:1px solid #F00} 
.divcss5_left{ float:left;width:150px;border:1px solid #00F;height:50px} 
.divcss5_right{ float:right;width:150px;border:1px solid #00F;height:50px} 
.clear{ clear:both}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie schreibe ich links schwebendes CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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