web-dev-qa-db-fra.com

Définir la largeur du parent égale à la largeur totale des enfants en utilisant uniquement CSS?

Je ne sais pas combien d'éléments .child.parent contiendront, mais je connais leur largeur individuelle.

Je veux que la largeur de .parent soit égale à (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 utiliser Javascript?

** 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>
htmlcsscss3widthcalc
7
Sprout Coder

Je sais que c'est un peu tard, mais j'espère que cela aidera quelqu'un qui recherche une 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 consiste à utiliser inline-flex pour la parent et inline-table pour la child. Tout est dynamique. Je fais défiler la table horizontalement en ajoutant une 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>
10
sooon

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  }

.parent {
  height: 100%;
  display:inline-block;
  background:#bada55;
  font-size:0; /* clear whitespace*/
}

.child {
  height: 100px;
  width: 100px;
  border:1px solid red;
  display:inline-block;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

5
Paulie_D

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

C'est pas encore supporté par d'autres navigateurs majeurs cependant.

1
Pranav