Comment faire croître une div avec du contenu ?

Question

En ce qui concerne le html, comment faire pour qu'un conteneur div grandisse avec le contenu au lieu de définir manuellement une largeur et une hauteur.

<div id="container">
  <div id="logo">
    <img src="someimage.png"/>
  </div>
</div>

Quelles que soient les dimensions du logo, le conteneur ne grandit pas avec lui :( Comment puis-je résoudre ce problème, ou est-il possible de le résoudre ?

Answer 1

Si vous ne définissez pas de largeur et/ou de hauteur, l'élément div grandit en même temps que son contenu. Sauf si son contenu est défini comme absolu ! Si le contenu est défini comme flottant, vous devez définir le conteneur

overflow:hidden

afin de le laisser grandir !

Answer 2

Le comportement par défaut des divs est de remplir toute la largeur disponible. Il y a plusieurs façons d'y déroger :

• fixer display: inline-block (non compatible avec IE)
• le faire flotter (ce qui a pour effet secondaire de le faire flotter)
• fixer display: inline (mais ce n'est presque jamais ce que vous voulez)
• fixer position: absolute
• coder en dur une largeur (pas de largeur dynamique cependant)

En dernier recours, envisagez le javascript.

Answer 3

Utilisez la propriété css magique appelée "flex", elle est vraiment étonnante.

yourDiv{
display:flex;
}

Assurez-vous simplement que les enfants ne sont pas position : absolute car cela ne fonctionnera pas avec flex.

Answer 4

Vous pouvez spécifier la largeur et la hauteur minimales et le DIV ajustera la largeur et la hauteur en fonction des changements de contenu (bien sûr, pas en dessous de la largeur/hauteur minimale).

Exemple de code de travail

Les propriétés css les plus importantes du code (DIV est éditable, il suffit donc de taper du texte pour qu'il s'agrandisse en largeur / hauteur) :

 min-height: 200px;
  min-width: 100px;

Answer 5

Si vous avez utilisé float il empêche <div> pour grandir avec le contenu afin de pouvoir utiliser clear après float et cela fonctionnera.

<div class="clear-fix"></div>

.clear-fix{
   clear: both;
}