Comment diviser la largeur de l'écran entre deux éléments avec des largeurs fixes et flexibles ?

Division de la largeur de l'écran entre deux éléments

Dans la conception Web, vous pouvez rencontrer le besoin de diviser la largeur de l'écran entre deux divs, avec l'un ayant une largeur fixe et l'autre occupant l'espace restant. Voici comment y parvenir :

Utilisation de Float avec une largeur basée sur un pourcentage :

Cette approche utilise la propriété CSS float pour positionner les div côte à côte.

.left {
    float: left;
    width: 83%;
}

.right {
    float: right;
    width: 17%;
}

Notez que la somme des largeurs atteint 100 % pour garantir que les divs remplissent toute la largeur du conteneur parent.

Utilisation de Flexbox :

Flexbox est un système de mise en page plus polyvalent qui vous permet de contrôler la taille et la position des éléments à l'aide de dimensions flexibles.

.container {
    display: flex;
}

.left {
    flex: 1;
}

.right {
    width: 250px;
}

Dans cet exemple, le div ".container" est configuré pour s'afficher sous forme de flexbox. , et le div ".left" reçoit un facteur de croissance flexible de 1, ce qui lui permet de s'étendre pour remplir l'espace restant après le div ".right" à largeur fixe.

Utilisation du tableau d'affichage :

Vous pouvez également utiliser display: table pour créer une disposition à deux colonnes où la première colonne a une largeur fixe et la deuxième colonne occupe l'espace restant.

.left {
    display: table-cell;
    width: 250px;
}

.right {
    display: table-cell;
}

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!