Comment créer une largeur restante de remplissage Div dans un conteneur parent ?

Réalisation d'une distribution dynamique de la largeur : remplissage de la largeur de division restante

Lorsque vous travaillez avec plusieurs divs au sein d'une div parent, la tâche consistant à garantir qu'une div remplit la largeur restante peut surgir. Cette technique peut être particulièrement utile pour créer des mises en page réactives qui s'adaptent à différentes tailles de contenu.

Dans le code HTML fourni, vous disposez d'un div parent (#Main) avec deux divs (#div1 et #div3) de largeurs fixes. et un troisième div (#div2) que vous souhaitez remplir l'espace restant. Pour ce faire, vous pouvez utiliser plusieurs méthodes :

Divs flottants :

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

Mise en page Flexbox :

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

Disposition en grille :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!