Heim > Web-Frontend > CSS-Tutorial > So lassen Sie Boxen in CSS nebeneinander erscheinen

So lassen Sie Boxen in CSS nebeneinander erscheinen

醉折花枝作酒筹
Freigeben: 2023-01-05 16:10:39
Original
19981 Leute haben es durchsucht

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“.

So lassen Sie Boxen in CSS nebeneinander erscheinen

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

<body>

    <div>第一个盒子</div>

    <div>第二个盒子</div>

    <div>第三个盒子</div>

</body>

Nach dem Login kopieren

So lassen Sie Boxen in CSS nebeneinander erscheinen

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.

1

2

3

4

5

6

<strong><style>

div{

    border: 1px solid #000;

    float:left;

}

</style></strong>

Nach dem Login kopieren

So lassen Sie Boxen in CSS nebeneinander erscheinen
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:

1

2

3

4

5

6

<style>

div{

    border: 1px solid #000;

    display: inline;

}

</style>

Nach dem Login kopieren

So lassen Sie Boxen in CSS nebeneinander erscheinen
Empfohlenes Lernen:

css-Video-Tutorial

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage