So zeigen Sie Boxen nebeneinander an: 1. Verwenden Sie das Float-Attribut, um die Side-by-Side-Anzeige festzulegen. 2. Verwenden Sie das Display-Attribut, um die Side-by-Side-Anzeige festzulegen. Setzen Sie einfach „display:“ auf „div“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Lassen Sie uns zunächst drei Div-Box-Objekte einrichten, ohne CSS-Stile festzulegen, um den Effekt zu sehen. Der Code lautet wie folgt:
1 2 3 4 5 |
|
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 p eine exklusive Zeile belegt , und die andere besteht darin, den Anzeigestil festzulegen. Als Nächstes werde ich vorstellen, wie das Problem gelöst werden kann, dass P-Box-Objekte horizontal nebeneinander angeordnet und in derselben Zeile durch Artikel + Bilder + Fälle angezeigt werden.
Wir können ein Float-Attribut für das Div festlegen, um das Problem der Anzeige nebeneinander zu lösen -Side-P-Boxen kleiner oder gleich der Breite der äußersten Box sind, können Sie erreichen, dass mehrere P-Objekte nebeneinander angezeigt werden. Hinweis
: ①Legen Sie das Float-Attribut fest. ②Die Gesamtbreite der Seite an Seite ist kleiner als die Breite der äußeren Ebene.
1 2 3 4 5 6 |
|
Hier legen wir einen Float für das Div fest. Wenn wir im tatsächlichen Gebrauch eine CSS-Klasse hinzufügen möchten, um div-Objekte in Zeilen anzuzeigen, legen wir natürlich einen Float für den anzuzeigenden CSS-Selektor fest parallel. Vermeiden Sie, dass dem schwebenden Stil weitere unnötige Einstellungen hinzugefügt werden.
2. Verwenden Sie die CSS-Anzeige, um Div-Box-Objekte nebeneinander anzuzeigen.
Setzen Sie den div{display:inline}-Stil auf das div-Tag. Screenshot nach Lösung des Problems:
1 2 3 4 5 6 |
|
Empfohlenes Lernen:
Das obige ist der detaillierte Inhalt vonSo lassen Sie Boxen in CSS nebeneinander erscheinen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!