Heim > Artikel > Web-Frontend > So legen Sie fest, dass 4 Divs in CSS nebeneinander angezeigt werden

So legen Sie fest, dass 4 Divs in CSS nebeneinander angezeigt werden

青灯夜游Original: 2021-07-21 15:41:0511929Durchsuche

So setzen Sie 4 Divs mit CSS nebeneinander: 1. Verwenden Sie das Float-Attribut, um die 4 Divs zu schweben. 2. Verwenden Sie den Stil „display:inline;“ oder „display:inline-block;“, um die vier Divs in Inline-Elemente oder Inline-Blockelemente umzuwandeln.

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

Ein div ist ein Blockelement, das eine eigene Zeile einnimmt und dessen Breite automatisch die Breite seines übergeordneten Elements ausfüllt, automatisch umbrochen und angezeigt wird. Wie kann man also dafür sorgen, dass mehrere div-Elemente nebeneinander angezeigt werden? Lassen Sie mich Ihnen die folgende Methode vorstellen.

Methode 1: Verwenden Sie float, um das Div schweben zu lassen

Solange die Gesamtbreite Ihrer nebeneinander liegenden Div-Boxen kleiner oder gleich der Breite der äußersten Box ist, können mehrere Div-Objekte nebeneinander angezeigt werden Seite an Seite.

Beispiel:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 120px;
				border: 1px solid red;
				float: left;
			}
		</style>
	</head>
	<body>
		<div>div测试文本！</div>
		<div>div测试文本！</div>
		<div>div测试文本！</div>
		<div>div测试文本！</div>
	</body>
</html>

Rendering:

So legen Sie fest, dass 4 Divs in CSS nebeneinander angezeigt werden

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 von der Art des Elements.

Methode 2: Verwenden Sie das Anzeigeattribut, um das Div in ein Inline-Element oder ein Inline-Blockelement umzuwandeln.

Das Inline-Element oder das Inline-Blockelement belegt keine exklusive Zeile und benachbarte Inline-Elemente werden in der Zeile angeordnet In derselben Zeile wird die Zeile geändert, bis in einer Zeile kein Platz mehr vorhanden ist.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 200px;
				border: 1px solid red; 
				display:inline;
				/* display: inline-block; */
			}
		</style>
	</head>
	<body>
		<div>div测试文本！</div>
		<div>div测试文本！</div>
		<div>div测试文本！</div>
		<div>div测试文本！</div>
	</body>
</html>

Rendering:

So legen Sie fest, dass 4 Divs in CSS nebeneinander angezeigt werden

Das Anzeigeattribut wird verwendet, um den Typ des Anzeigefelds zu definieren, das vom Element beim Erstellen des Layouts generiert wird.

display:inline;: Das Element wird als Inline-Element angezeigt, ohne Zeilenumbrüche vor und nach dem Element.
display:inline-block;: Das Element wird als Inline-Blockelement angezeigt, ohne Zeilenumbrüche vor und nach dem Element.

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo legen Sie fest, dass 4 Divs in CSS nebeneinander angezeigt werden. 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

Vorheriger Artikel：10 wissenswerte CSS-Funktionen im Jahr 2021 (Favoriten teilen)Nächster Artikel：10 wissenswerte CSS-Funktionen im Jahr 2021 (Favoriten teilen)

In Verbindung stehende Artikel

Mehr sehen