Comment créer une mise en page avec une division à largeur fixe et une division à largeur flexible ?

Divs avec distribution de largeur variable

Dans le développement Web, il est souvent utile de créer une mise en page dans laquelle deux divs partagent l'espace disponible, mais un div a une largeur fixe.

Question :

Comment pouvez-vous ajuster la largeur des divs pour que l'un conserve une largeur fixe tandis que l'autre occupe l'espace restant ?

Solution :

Pour y parvenir, suivez ces étapes :

1. Structure HTML :

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

2. CSS :

Pour Div droite à largeur fixe:

<code class="css">.right {
    float: right;
    width: 250px;  // Set your desired fixed width
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}</code>

Pour Div gauche à largeur flexible:

<code class="css">.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}</code>

3. Notes supplémentaires :

• Vous pouvez également utiliser display: table au lieu de float pour une meilleure compatibilité entre navigateurs.
• Ajustez la propriété width de .right en fonction de vos besoins spécifiques .
• Cette approche garantit que le div à largeur fixe reste inchangé, tandis que le div à largeur flexible s'ajuste pour remplir l'espace restant.

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!