web-dev-qa-db-fra.com

Comment ajuster la taille d'une div à envelopper ses enfants flottés

J'ai une div enroulée autour de deux enfants, l'un flottant à gauche et l'autre à droite. Je veux mettre une bordure et un fond autour des enfants, mais la div a 0 hauteur car elle ne redimensionne pas pour s'adapter aux enfants.

Voici un exemple de cette action: http://jsfiddle.net/VVZ7j/17/

Je veux que le fond rouge disparaisse complètement. J'ai essayé height: auto, mais cela n'a pas fonctionné.

Toute aide serait appréciée, merci.

P.S. Je ne veux pas utiliser de javascript si c'est possible.

htmlcsscss-float
27
user1447371

C'est un problème courant lorsque vous travaillez avec des flotteurs. Il existe plusieurs solutions communes, que j'ai commandées par préférence personnelle (la meilleure approche en premier):

  1. Utilisez le pseudo-élément :: after CSS. Ceci est connu sous le nom de 'clearfix', et fonctionne à partir de IE8. Si vous avez besoin de compatibilité avec les versions précédentes d'IE, cette réponse devrait vous aider . Exemple .

    .parentelement::after {
    content: "";
    display: table;
    clear: both;
}

  2. Ajoutez les deux éléments flottants dans un conteneur avec l'attribut CSS overflow: auto ou overflow: hidden. Cependant, cette approche peut poser problème (par exemple, si une info-bulle recouvre les bords de l’élément parent, une barre de défilement apparaîtra). Exemple .

    <div style="overflow: auto">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

  3. Ajoutez une hauteur définie à l'élément parent. Exemple .

    <div style="height: 200px">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

  4. Faites de l'élément parent un float. Exemple .

    <div style="float: left">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

  5. Ajoutez un div après les floats avec clear: both. Exemple .

    <div style="float: left"></div>
<div style="float: left"></div>
<div style="clear: both"></div>
60
jacktheripper

Ajoutez overflow: hidden; à #wrap. Ceci est un clear fix. Voici de la documentation à ce sujet: http://positioniseverything.net/easyclearing.html

LE: Il y a aussi plusieurs façons d’y parvenir, en fonction de la compatibilité du navigateur:

  1. Ajouter débordement: masqué dans le conteneur parent.

#wrap { overflow: hidden; }

  1. Utilisez un pseudo-élément pour ajouter clear: both.

#wrap:after { clear: both; content: ""; display: table;}

  1. La technique la plus couramment utilisée consiste à ajouter un extra comme dernier élément du conteneur parent.

<div style="clear:both"></div>

Je prefferai not d’utiliser le troisième pour obtenir un balisage HTML supplémentaire.

5
BebliucGeorge

Essayez d’ajouter overflow: hidden à votre #wrapdiv.

3
Jim

Je suis venu commencer à utiliser cette solution "micro-clearfix" de Nicolas Gallagher.

http://nicolasgallagher.com/micro-clearfix-hack/

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

Ajoutez simplement cela à votre CSS et à tout élément flottant, ajoutez la classe "cf" à l'emballage de tout élément ayant des enfants flottants.

2
jmbertucci

Il suffit d’ajouter une div avec le style clair: les deux avant de fermer une div externe c’est-à-dire ici

- exemple de code--

<div id="wrap">
    <div id="left">
        <p>some content at left</p>
    </div>
    <div id="right">
        <p>some content at right</p>
    </div>
    <div style="clear:both"></div>
</div>
0
vikrantx