Heim > Artikel > Web-Frontend > So lassen Sie Boxen in CSS nebeneinander erscheinen
So lassen Sie Boxen in CSS nebeneinander erscheinen
- 醉折花枝作酒筹Original
- 2021-04-22 18:04:5319837Durchsuche
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:
<body>
<div>第一个盒子</div>
<div>第二个盒子</div>
<div>第三个盒子</div>
</body>
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.
1. Verwenden Sie CSS-Float für die Anzeige nebeneinander.
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. <style>
div{
border: 1px solid #000;
float:left;
}
</style>
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.
Wir können das Problem lösen, indem Sie display:inline hinzufügen, um Div-Box-Objekte nebeneinander anzuzeigen.
Setzen Sie den div{display:inline}-Stil auf das div-Tag. Screenshot nach Lösung des Problems:
<style>
div{
border: 1px solid #000;
display: inline;
}
</style>
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!