Heim >Web-Frontend >CSS-Tutorial >So zeigen Sie zwei Absätze nebeneinander in CSS an
So zeigen Sie zwei Absätze nebeneinander in CSS an
- WBOYOriginal
- 2021-12-03 09:26:565459Durchsuche
In CSS können Sie das Float-Attribut verwenden, um zwei Elemente nebeneinander anzuzeigen. Dieses Attribut wird verwendet, um die Gleitrichtung des Elements festzulegen. Wenn der Wert des Attributs „links“ ist, schwebt das Element nach links. Dadurch werden die Elemente nebeneinander angezeigt. Die Syntax lautet „Element{float:left;}“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So zeigen Sie zwei Absätze nebeneinander in CSS an
Sie können das Float-Attribut verwenden, um den Float einheitlich nach links zu setzen, um zwei Absätze mit Elementen nebeneinander anzuzeigen. Wenn der Attributwert verlassen wird, schwebt das Element nach links. Das Attribut
float definiert, in welche Richtung das 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.
Hinweis: Wenn in einer Zeile nur sehr wenig Platz für ein schwebendes Element vorhanden ist, springt das Element zur nächsten Zeile und dieser Vorgang wird fortgesetzt, bis in einer bestimmten Zeile genügend Platz vorhanden ist.
Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p{
width:200px;
height:100px;
float:left;
}
</style>
</head>
<body>
<p>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>
<p>这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段</p>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo zeigen Sie zwei Absätze nebeneinander in CSS an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!