So legen Sie fest, dass 4 Divs in CSS nebeneinander angezeigt werden-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

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

青灯夜游

Jul 21, 2021 pm 03:41 PM

css

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.

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

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

Verwandter Artikel

Https ist einfach!Apr 11, 2025 am 11:51 AM

Ich war schuldig, die Komplexität von Https öffentlich beklagt zu haben. In der Vergangenheit hat ich SSL-Zertifikate von Drittanbietern gekauft und hatte Probleme

HTML -DatenattributehandbuchApr 11, 2025 am 11:50 AM

Alles, was Sie schon immer über Datenattribute in HTML, CSS und JavaScript wissen wollten.

Unveränderlichkeit im JavaScript verstehenApr 11, 2025 am 11:47 AM

Wenn Sie in JavaScript noch nicht mit Unveränderlichkeit gearbeitet haben, ist es möglicherweise einfach, sie mit der Zuweisung einer Variablen für einen neuen Wert oder einer Neuzuweisung zu verwechseln.

Benutzerdefinierte Styling -Formulareingaben mit modernen CSS -FunktionenApr 11, 2025 am 11:45 AM

Es ist durchaus möglich, benutzerdefinierte Kontrollkästchen, Optionsfelder und Schalter zu erstellen und gleichzeitig semantisch und zugänglich zu bleiben. Wir brauchen nicht einmal eine

FußnoteApr 11, 2025 am 11:34 AM

Es gibt spezielle Superset -Nummer -Charaktere, die manchmal perfekt für Fußnoten sind. Hier sind sie:

So erstellen Sie einen animierten Countdown -Timer mit HTML, CSS und JavaScriptApr 11, 2025 am 11:29 AM

Haben Sie jemals einen Countdown -Timer für ein Projekt benötigt? Für so etwas ist es möglicherweise natürlich, nach einem Plugin zu greifen, aber es ist tatsächlich viel mehr

Einfrierzeichen der Benutzer-Agent-SaitenApr 11, 2025 am 11:20 AM

Es gab Neuigkeiten über Chrome, die ihre Benutzer-Agent-Zeichenfolge einfrieren (und alle anderen großen Browser sind an Bord). Das heißt, sie haben noch einen Benutzer-Agent (UA).

Browserversion Release -SpektrumApr 11, 2025 am 11:15 AM

Immer wenn ein Browser Versionen aktualisiert, ist es ein kleines Marketing -Event und dies zu Recht. Sieht aus wie für Firefox it es ungefähr einmal im Monat, Chrome ist ~ 6 Wochen und ist

See all articles