Comment accueillir une division à largeur fixe et une division d'espace restant dans la conception Web ?

Accommoder les divs à largeur fixe et restants

Dans la conception Web, un défi courant consiste à accueillir deux divs, l'un ayant une largeur fixe spécifique et l'autre devant être dynamique. occupent l'espace restant.

Solution basée sur CSS

Une approche efficace utilise CSS :

.left {</p>
<pre class="brush:php;toolbar:false">width: 83%;

}

.right {

width: 16%;

}

Cette configuration CSS garantit que le div .left occupe 83 % de la largeur disponible, tandis que le div .right occupe les 16 % restants, préservant la largeur fixe souhaitée pour le div .left.

Affichage : méthode de table

Alternativement, la propriété display: table offre une solution puissante :

<div class="right"> </div><br><div class="left"></div>

.left {</p>
<pre class="brush:php;toolbar:false">display: table-cell;
width: 83%;

}

.right {

display: table-cell;
width: 16%;

}

En définissant le display property to table pour le conteneur parent et table-cell pour les divs, le navigateur crée effectivement un tableau à deux colonnes, avec le div à largeur fixe apparaissant dans une cellule et l'espace restant remplissant dynamiquement l'autre cellule.

Conclusion

Les méthodes CSS et display: table fournissent des solutions efficaces au problème de l'hébergement d'un div à largeur fixe tout en permettant à l'autre div d'occuper l'espace restant. La meilleure approche dépend des exigences spécifiques et des considérations de compatibilité du navigateur.

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!