Heim > Artikel > Web-Frontend > Beispielcode-Sharing für die Anzeige mehrerer Div-Boxen nebeneinander in CSS

Beispielcode-Sharing für die Anzeige mehrerer Div-Boxen nebeneinander in CSS

黄舟Original: 2017-07-22 10:32:2212290Durchsuche

1. So implementieren Sie das DIV-Layout von div mit zwei Spalten, einer Zeile und zwei Spalten, div mit zwei Spalten nebeneinander, einer Zeile und zwei Spalten DIV-Layout-Tutorial-Lösung
So realisieren Sie zwei DIV-Boxen nebeneinander Wenn Sie auf der Seite sind und nur zwei Spalten des DIV-Layouts in einer Zeile anzeigen, können Sie mit width + Float ein DIV-Layout realisieren, das zwei Spalten in einer Zeile anzeigt.
Im ersten Fall sind die Floats gleich
Machen Sie die Float-Werte der beiden Div-Boxen gleich, legen Sie beispielsweise float:left oder float:right fest und legen Sie die Breite entsprechend fest. Hier verwenden wir einen Fall, um ein DIV-Layout mit einer Zeile und zwei Spalten zu implementieren.
1), vollständiger Beispiel-DIV+CSS-Code:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>两个DIV并排</title> 
<style> 
.div-a{ float:left;width:49%;border:1px solid #F00} 
.div-b{ float:left;width:49%;border:1px solid #000} 
</style> 
</head> 
<body> 
<div class="div-a">第一个DIV盒子</div> 
<div class="div-b">第二个DIV盒子</div> 
</body> 
</html>

2), Sie müssen auf die Breite achten, wenn Sie das DIV in einer Zeile und zwei Spalten anordnen möchten Vermeiden Sie, dass das dritte DIV hier nebeneinander liegt. Es ist erforderlich, die Breite festzulegen und zu berechnen (stellen Sie hier die prozentuale Breite auf 49 % ein). Die Summe der Breiten der drei DIV-Boxen ist größer als die Breite des übergeordnetes Element, und die Summe der Breiten der beiden DIVs ist kleiner als die Breite des übergeordneten DIVs, sodass nur zwei DIVs nebeneinander liegen können.
3) Im zweiten Fall sind die Float-Werte unterschiedlich
Einer ist auf float:left gesetzt; der andere ist auf float:right gesetzt.
Vollständiger HTML-Quellcode:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>两个DIV并排</title> 
<style> 
.div-c{ float:left;width:49%;border:1px solid #F00} 
.div-d{ float:right;width:49%;border:1px solid #000} 
</style> 
</head> 
<body> 
<div class="div-c">第三个DIV盒子</div> 
<div class="div-d">第四个DIV盒子</div> 
</body> 
</html>

2. Horizontale Anordnung von DIVs_CSS Wie man mehrere Div-Boxen nebeneinander erscheinen lässt, wie man mehrere Div-Boxen nebeneinander erscheinen lässt und wie man Divs anordnet horizontal?
Lassen Sie uns zunächst drei Div-Box-Objekte einrichten, ohne CSS-Stile festzulegen, um den Effekt zu sehen. Der Code lautet wie folgt:
Screenshot von Divs, die nicht in derselben Zeile angezeigt werden
Drei Div-Boxen werden in einer exklusiven Zeile angezeigt
Das Standardstilattribut der Div-Box selbst besteht darin, eine exklusive Zeile zu belegen . Es gibt normalerweise zwei Möglichkeiten, das Problem zu lösen, dass Divs eine exklusive Zeile belegen, und die andere darin, den Anzeigestil festzulegen. Als nächstes werde ich vorstellen, wie man das Problem löst, Div-Box-Objekte horizontal nebeneinander anzuordnen und sie durch Artikel + Bilder + Fälle nebeneinander anzuzeigen.
1. Verwenden Sie CSS-Float, um nebeneinander anzuzeigen.
Wir können das Problem der nebeneinander liegenden Anzeige lösen, indem wir ein Float-Attribut für Divs festlegen, solange die Gesamtbreite Ihres nebeneinander liegenden Divs beträgt Wenn die Breite der äußersten Boxen kleiner oder gleich ist, können mehrere Divs nebeneinander angezeigt werden.
Float hinzufügen, um die Anzeige von Div-Boxen nebeneinander zu realisieren
Float hinzufügen, um die Anzeige mehrerer Divs nebeneinander zu realisieren
Hier legen wir natürlich einen Float für das Div fest, wenn es tatsächlich verwendet wird Dazu müssen wir die CSS-Klasse hinzufügen, um die div-Objekte in Zeilen anzuzeigen. Wir werden den schwebenden CSS-Selektor so einstellen, dass er in derselben Zeile angezeigt wird. Vermeiden Sie, dass dem schwebenden Stil weitere unnötige Einstellungen hinzugefügt werden.
2. Verwenden Sie die CSS-Anzeige, um sie nebeneinander anzuzeigen.
Wir können das Problem lösen, indem wir display:inline hinzufügen, um Div-Box-Objekte nebeneinander anzuzeigen. Um andere Div-Box-Objekte zu unterscheiden, die nicht in horizontaler Anordnung angezeigt werden müssen, verwenden wir eine einheitliche fette CSS-Klasse für benachbarte Div-Boxen, die in derselben Zeile angezeigt werden müssen, und das CSS heißt „.div-“ im Einklang".
CSS-Code lautet wie folgt:

.div-inline{ display:inline}

Html-Code-Snippet:

<div class="div-inline">第一个div盒子</div> 
<div class="div-inline">第二个盒子</div> 
<div class="div-inline">第三个盒子</div>

3. Zusammenfassung: Ob Float oder Display-Erreichungsseite -by-side-Anzeige: Wenn Sie sie nebeneinander anzeigen möchten, muss zunächst die Gesamtbreite kleiner oder gleich der Breite der oberen Ebene des Objekts sein, damit Sie sie nebeneinander anzeigen können, um ein horizontales Layout zu erreichen.

Das obige ist der detaillierte Inhalt vonBeispielcode-Sharing für die Anzeige mehrerer Div-Boxen nebeneinander in CSS. 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：Ausführliche Erläuterung der Beispiele für transparente CCS-Attribute und transparente Vererbungsmethoden im HintergrundNächster Artikel：Ausführliche Erläuterung der Beispiele für transparente CCS-Attribute und transparente Vererbungsmethoden im Hintergrund

In Verbindung stehende Artikel

Mehr sehen