Comment diviser une division en deux parties, une div occupant l'espace restant ?

Comment réaliser une division horizontale parfaite avec des divs en XHTML/CSS

Vous avez des divs imbriqués à l'intérieur d'un div externe avec une largeur de 100 %, et vous souhaitez diviser la largeur des divs imbriqués en deux parties, un div occupant l'espace restant après l'autre. Le problème est que vous ne voulez pas spécifier la largeur du premier div, car sa taille dépend de son contenu.

La magie du débordement caché

Le La solution réside dans l'utilisation de overflow: Hidden;. Cette propriété CSS empêche les éléments adjacents aux éléments flottants de s'étendre au-delà des limites du flottant.

Structure HTML

Ajustez votre HTML comme suit, en remplaçant les caractères # par des ID appropriés :

<div>

Styles CSS

Implémentez le CSS suivant :

#outer {
    overflow: hidden;
    width: 100%;
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;
    border: solid 3px #00c;
    background: #ddf;
}

Support IE 6

CSS facultatif pour la prise en charge d'IE 6 (si nécessaire) :

<!--[if lte IE 6]>
    <style type="text/css">
        #inner2 {
            zoom: 1;
        }

        #inner1 {
            margin-right: -3px;
        }
    </style>
<![endif]-->

Résultat

Avec ces changements, #inner2 occupera l'espace horizontal restant, assurant un Répartition soignée et dynamique de la largeur disponible entre les divs imbriqués.

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!