Comment faire en sorte qu'un div occupe l'espace restant après un div à largeur fixe ?

Comment ajuster deux divs, l'un avec une largeur fixe et l'autre occupant l'espace restant

Lorsque vous travaillez avec deux conteneurs div dont un a besoin d'une largeur spécifique et l'autre doit occuper dynamiquement l'espace restant, il existe plusieurs approches pour réaliser cette disposition. Explorons deux méthodes :

Utiliser Display : Table ou Table-Cell

Avec cette méthode, nous utilisons les propriétés d'affichage CSS pour créer une structure de type tableau :

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.right {
    float: right;
    width: 250px;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

.left {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}</code>

Dans ce cas, le div "droit" a une largeur fixe de 250px, tandis que le div "gauche" occupe l'espace restant en raison de sa propriété "overflow: caché".

Utiliser le flotteur et la largeur en pourcentage

Une autre approche consiste à utiliser la propriété CSS float et à définir la largeur des divs sous forme de pourcentages :

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.left {
    float: left;
    width: 83%;
    min-height: 50px;
    margin-right: 10px;
}

.right {
    float: right;
    width: 16%;
    min-height: 50px;
    height: 100%;
}</code>

Ici, le div "gauche" occupe 83 % de la largeur disponible, laissant 16 % pour le div "droite" avec une largeur fixe.

Exemple de démo

Vérifiez regardez la démo en direct suivante sur JSFiddle pour voir ces méthodes en action : http://jsfiddle.net/SpSjL/

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!