web-dev-qa-db-fra.com

Développer le conteneur div avec la largeur du contenu

J'ai la structure suivante dans mon application:

<div id="container">
  <div id="child_container">
    <div class="child"></div>
    <div class="child"></div>
    ...
    <div class="child"></div>
  </div>
</div>

Chaque div enfant a une largeur fixe connue, mais l’application permet à un plus grand nombre d’entre eux d’être insérés dans le div enfant_container.

Ce que j'essaie de faire est de faire en sorte que la division de conteneur se dilate horizontalement si nécessaire, étant donné la largeur totale du conteneur enfant.

C'est ce qui se passe actuellement:

+------ container -------+
+--- child_container ----+
| child1 child2 child3   |
| child4                 |
+------------------------+

Si je règle la largeur de la div de child_container sur une valeur fixe, je peux la faire s'étendre horizontalement au-delà de la div de conteneur, ce qui fonctionne malgré son aspect un peu laid:

+------ container -------+
+------ child_container -+----+
| child1 child2 child3 child4 |
+------------------------+----+

Cependant, cela nécessite de le recalculer chaque fois qu'un nouvel enfant est ajouté.

Est-il possible de le faire sans utiliser de largeurs fixes pour le conteneur enfant, de telle sorte que le résultat final soit

+--------- container ---------+
+------ child_container ------+
| child1 child2 child3 child4 |
+-----------------------------+

Merci.

csscontainersexpand
41
Andre

Quelque chose comme ça devrait marcher:

#container, #child_container, .child { 
    position: relative; 
    float: left;
}
29
wajiw

Encore plus facile:

<style>
    #container{ display: inline-block; }
</style>
29
Nate Barr

Le conteneur parent ne grandira pas lorsqu'un élément enfant est ajouté.

+------ container -------+
+--- child_container ----+
| child1 child2 child3   |
| child4                 |
+------------------------+

mais nous pouvons éviter le rendu d'un nouveau sur la ligne suivante en utilisant css3 flex box. L'échantillon est placé dans le chemin mentionné ci-dessous

  .products{
            display: -webkit-flex;
            -webkit-flex-flow: row;
            /*-webkit-justify-content: center;*/
        }
        .products > div{
            padding: 0 4em;
        }

Le résultat ressemblera à ceci:

+--- child_container ----+|
| child1 child2 child3  ch|ild4 child5  
|                         |
+------------------------+
12
user2364729

Si vous faites flotter tout ce qui reste, y compris les divs contenant, cela fonctionnera.

2
AlbertVo

La solution moderne serait aujourd'hui 

#child_container {
    display: flex;
}

Étant donné que flex-wrap est défini par défaut sur

flex-wrap: nowrap;

Cette solution simple fonctionne à merveille. Et maintenant aussi dans tous les navigateurs pertinents.

0
Juuro