Set Parent Largeur égale à la Enfants de Largeur Totale en utilisant uniquement CSS?

Je ne sais pas combien de .child éléments .parent va contenir, mais je sais que leur largeur.

Je veux régler la largeur de .parent être égale à la largeur de chaque .child) * (nombre total de .child)

Je ne veux pas utiliser floats et width: auto;

Puis-je faire quelque chose avec calc() sans l'aide de Javascript ?

**Les CSS : **

.parent {
  height: 100%;
  width: calc({number of children} * {width of each child = 100px});
}

.child {
  height: 100px;
  width: 100px;
}

HTML :

<div class="parent">
  <div class="child">
  <div class="child">
  <div class="child">
</div>
est l'aide de display:flex une option?
sont ceux child éléments alignés horizontalement ou sont-ils empilés?
les éléments enfant de côté ... côte à côte?
display:inline-block le ferait.

OriginalL'auteur Sprout Coder | 2014-12-09

  1. 12

    Je sais que c'est un peu tard, mais Espérons que cela va aider quelqu'un qui est à la recherche de solution similaire:

    <div class="parent" style="display: inline-flex">
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
        </div>

    l'astuce est d'utiliser inline-flex pour la parent et inline-table pour la child. Tout est dynamique. Je fais le tableau défilant horizontalement par l'ajout d'un autre grandparent avec overflow-x:scroll;:

    <div class="grandparent" style="width: 300px; overflow-x: scroll; background: gray">
        <div class="parent" style="display: inline-flex">
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
        </div>
    </div>
    merci il fonctionne très bien! J'en ai besoin uniquement pour chrome n'a donc pas tester n'importe où ailleurs
    Merci cela a fonctionné pour moi avec flex-direction:column, mais comme vous l'avez dit inline-flex est le tour de ce.
    incroyable, cela fonctionne comme un remplacement direct pour l'affichage: flex dans mon cas

    OriginalL'auteur sooon

  2. 1

    Si vous êtes sur Chrome, vous pouvez utiliser max-width: fit-content

    C'est pas encore pris en charge par d'autres grands navigateurs.

    OriginalL'auteur Pranav

  3. 0
    .parent{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.child {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1; 
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>

</div>
    Veuillez nous fournir quelques explications avec votre morue.

    OriginalL'auteur Manjunatha N