Heim >Web-Frontend >CSS-Tutorial >Wie man mit CSS zwei Divs in derselben Zeile anzeigt
So zeigen Sie zwei Divs in derselben Zeile an: 1. Legen Sie den Stil „display:inline;“ oder „display:inline-block;“ fest und konvertieren Sie sie in Inline-Elemente oder Inline-Blockelemente. 2. Legen Sie den Stil „float:left;“ auf die beiden div-Elemente fest.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
In HTML ist das div-Element ein Blockelement und jedes Element auf Blockebene belegt eine eigene Zeile. Daher können nicht mehrere div-Elemente in einer Zeile angezeigt werden.
Wie kann man also dafür sorgen, dass zwei Divs in derselben Zeile angezeigt werden? Lassen Sie mich es Ihnen unten vorstellen.
Methode 1: Verwenden Sie das Anzeigeattribut, um es in ein Inline-Element oder ein Inline-Blockelement umzuwandeln.
Das Anzeigeattribut wird verwendet, um den Typ des Anzeigefelds zu definieren, das vom Element beim Erstellen eines Layouts generiert wird.
display:inline;
: Das Element wird als Inline-Element angezeigt, ohne Zeilenumbrüche vor und nach dem Element. display:inline;
:元素会被显示为内联元素,元素前后没有换行符。
display:inline-block;
display:inline-block;
: Das Element wird als Inline-Blockelement angezeigt, ohne Zeilenumbrüche vor und nach dem Element.
Beispiel:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div{ width: 200px; border: 1px solid red; display: inline-block; /*display:inline;*/ } </style> </head> <body> <div>div测试文本!</div> <div>div测试文本!</div> </body> </html>
Rendering:
CSS-Video-Tutorial]
Methode 2: Verwenden Sie float, um Div nebeneinander anzuzeigen
Wir haben einen Float für die festgelegt div Das Attribut kann das Problem lösen, dass die nebeneinander liegenden Div-Boxen nicht nebeneinander angezeigt werden Seite.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div{ width: 200px; border: 1px solid red; float: left; } </style> </head> <body> <div>div测试文本!</div> <div>div测试文本!</div> </body> </html>
Rendering:
Das obige ist der detaillierte Inhalt vonWie man mit CSS zwei Divs in derselben Zeile anzeigt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!