Heim > Artikel > Web-Frontend > Wie man mit CSS zwei Divs in derselben Zeile anzeigt
Wie man mit CSS zwei Divs in derselben Zeile anzeigt
- 青灯夜游Original
- 2021-03-05 11:58:1960735Durchsuche
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!