Heim > Web-Frontend > CSS-Tutorial > Wie kann ich zwei Divs mithilfe von CSS nebeneinander positionieren?

Wie kann ich zwei Divs mithilfe von CSS nebeneinander positionieren?

Susan Sarandon
Freigeben: 2024-12-20 02:01:09
Original
925 Leute haben es durchsucht

How Can I Position Two Divs Side-by-Side Using CSS?

Zwei Divs nebeneinander in CSS platzieren

Das Erstellen zweier benachbarter Divs kann eine häufige Layoutanforderung sein. Um dies zu erreichen, betrachten Sie den folgenden Ansatz:


Flexbox:

In dieser Lösung ist Flexbox wird verwendet, um die Divs horizontal anzuordnen:

<h1>parent {</h1><p>Anzeige: flexibel;<br>}</p><h1>schmal {</h1><p>Breite: 200px;<br>Hintergrund: hellblau; /<em>Nur ​​damit es sichtbar ist </em>/<br>}</p><h1>weit {</h1><p>flex: 1; /<em>Wächst bis zum Rest des Behälters </em>/<br>Hintergrund: hellgrün; /<em>Nur ​​damit es sichtbar ist </em>/<br>}<br>

<div> <div id="wide">Wide ( restliche Breite)</div><br> <div></div><br>

Dieser Ansatz ermöglicht es Ihnen, eine feste Breite für das linke Div (#narrow) anzugeben, während das rechte Div (#wide) automatisch belegt wird Der verbleibende Platz füllt die Bildschirmbreite aus.

Das obige ist der detaillierte Inhalt vonWie kann ich zwei Divs mithilfe von CSS nebeneinander positionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage