Heim >Web-Frontend >CSS-Tutorial >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:1961096Durchsuche

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.

Wie man mit CSS zwei Divs in derselben Zeile anzeigt

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 man mit CSS zwei Divs in derselben Zeile anzeigt

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: Wie man mit CSS zwei Divs in derselben Zeile anzeigt

[Empfohlenes Tutorial:

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: Wie man mit CSS zwei Divs in derselben Zeile anzeigt

Das Float-Attribut 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 davon, um welchen Elementtyp es sich handelt.

Bei schwebenden, nicht ersetzten Elementen geben Sie eine explizite Breite an, andernfalls werden sie so schmal wie möglich sein.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmiervideos🎜! ! 🎜

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn