So zeigen Sie zwei Absätze nebeneinander in CSS an-CSS-Tutorial-php.cn

So zeigen Sie zwei Absätze nebeneinander in CSS an

WBOY

Freigeben： 2021-12-03 09:26:56

Original

5445 Leute haben es durchsucht

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

So zeigen Sie zwei Absätze nebeneinander in CSS an

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>

Nach dem Login kopieren

Ausgabeergebnis:

So zeigen Sie zwei Absätze nebeneinander in CSS an

(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!