Wie man mit CSS drei Divs nebeneinander erstellt

Css-Methode, um drei Div-Elemente nebeneinander zu erstellen: 1. Legen Sie den Stil „display:inline;“ oder „display:inline-block;“ fest. 2. Verwenden Sie das Float-Attribut, um die drei Div-Elemente zu schweben . Syntax „float:left;“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

div ist ein Blockelement und wird standardmäßig in einer eigenen Zeile angezeigt:

<div></div>
<div></div>
<div></div>

Wie sorgt man also dafür, dass diese drei Divs nebeneinander angezeigt werden? Es gibt zwei Methoden, die ich Ihnen im Folgenden vorstellen möchte:

1 Verwenden Sie das Anzeigeattribut

, um alle drei Divs auf display:inline; oder display:inline- zu setzen. block; display:inline;或display:inline-block;

div{
	width: 100px;
	height: 20px;
	border: 1px solid red;
	display:inline-block;
}

注：当设置成display:inline;

div{
	width: 100px;
	height: 20px;
	border: 1px solid red;
	float:left;
}

Hinweis: Bei Einstellung auf display:inline; muss das Div Inhalt enthalten, andernfalls kann das Div nicht geöffnet werden.

2. Verwenden Sie das Float-Attribut

, um die drei Divs zu floaten

Das obige ist der detaillierte Inhalt vonWie man mit CSS drei Divs nebeneinander erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!