communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > tutoriel CSS > Comment accueillir une division à largeur fixe et une division d'espace restant dans la conception Web ?

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

DDD

Libérer： 2024-10-27 11:25:02

original

305 Les gens l'ont consulté

How to Accommodate a Fixed-Width Div and a Remaining Space Div in Web Design?

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">width: 83%;

Copier après la connexion

}

.right {

width: 16%;

Copier après la connexion

}

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: table-cell;
width: 83%;

Copier après la connexion

}

.right {

display: table-cell;
width: 16%;

Copier après la connexion

}

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!

source：php.cn

Article précédent：Comment la classe Bootstrap « mb-0 » affecte-t-elle la marge d'un élément ? Article suivant：Voici quelques options de titre, jouant avec le format des questions : * Puis-je déployer des fichiers HTML et CSS sur Tomcat sans fichier WAR ? (Direct et explicite) * Comment déployer des pages Web HTML et CSS sur Tomcat :

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur