Comment obtenir une distribution de largeur variable dans des divisions imbriquées avec débordement : masqué ?

Comment obtenir une distribution de largeur variable dans des divisions imbriquées

Dans xHTML/CSS, il est courant de rencontrer un scénario dans lequel plusieurs divs imbriquées ont besoin être aligné horizontalement, les divs internes ayant des largeurs variables en fonction de leur contenu. Cette question explore un défi courant : comment allouer l'espace horizontal disponible restant à l'un des divs internes lorsque sa largeur n'est pas spécifiée et dépend de son contenu.

Pour obtenir cet effet, nous pouvons utiliser la propriété CSS "débordement : caché ;". Cette propriété empêche les éléments adjacents aux éléments flottants de s'étendre derrière le flottant, créant ainsi une mise en page contrôlée.

Considérez la structure HTML ci-dessous :

<div>

Pour configurer la mise en page, le CSS suivant peut être appliqué :

#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;
}

En définissant « débordement : caché ; » sur le div "externe", nous forçons le div "inner1" flottant à rester contenu dans le div "externe". Le div "inner2" remplit ensuite l'espace horizontal restant.

Pour garantir que cette mise en page fonctionne dans les anciennes versions d'Internet Explorer (IE 6 et 7), le CSS supplémentaire suivant peut être utilisé avec les commentaires conditionnels HTML :

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

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

Ce style garantit que le div "inner2" remplit correctement l'espace restant dans IE 6 et ajuste la marge du div "inner1" pour compenser un écart introduit par la propriété "zoom".

Avec cette configuration, le div "inner1" ajustera dynamiquement sa largeur en fonction de son contenu, et le div "inner2" occupera la largeur disponible restante, créant une mise en page où les divs sont alignés horizontalement avec leurs largeurs respectives.

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!