Maison > interface Web > tutoriel CSS > Comment faire en sorte qu'un div occupe l'espace restant après un div à largeur fixe ?

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

Linda Hamilton
Libérer: 2024-10-26 12:52:29
original
198 Les gens l'ont consulté

How to Make a Div Take Up Remaining Space After a Fixed Width Div?

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>
Copier après la connexion
Copier après la connexion
<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>
Copier après la connexion

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>
Copier après la connexion
Copier après la connexion
<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>
Copier après la connexion

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!

source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal