Wie erstelle ich eine Div-Füllung mit verbleibender Breite in einem übergeordneten Container?

Erzielen einer dynamischen Breitenverteilung: Füllen der verbleibenden Div-Breite

Bei der Arbeit mit mehreren Divs innerhalb eines übergeordneten Divs kann die Aufgabe, sicherzustellen, dass ein Div die verbleibende Breite ausfüllt, unter Umständen nicht berücksichtigt werden entstehen. Diese Technik kann besonders nützlich beim Erstellen responsiver Layouts sein, die unterschiedliche Inhaltsgrößen berücksichtigen.

In Ihrem bereitgestellten HTML-Code haben Sie ein übergeordnetes Div (#Main) mit zwei Divs (#div1 und #div3) mit fester Breite und ein drittes Div (#div2), mit dem Sie den verbleibenden Platz füllen möchten. Um dies zu erreichen, können Sie mehrere Methoden anwenden:

Floating Divs:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; }
    #middle-div { float: left; width: calc(100% - 200px); }
    #right-div { width: 100px; float: right; }
</style>

Flexbox-Layout:

<style>
    #divMain { 
        display: flex;
        width: 500px; 
    }
    #left-div { width: 100px; }
    #middle-div { flex-grow: 1; }
    #right-div { width: 100px; }
</style>

Rasterlayout:

<style>
    #divMain { 
        display: grid;
        grid-template-columns: 100px auto 100px; 
    }
</style>

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Div-Füllung mit verbleibender Breite in einem übergeordneten Container?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!