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
sont ceux
les éléments enfant de côté ... côte à côte?
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
Vous devez vous connecter pour publier un commentaire.
Je sais que c'est un peu tard, mais Espérons que cela va aider quelqu'un qui est à la recherche de solution similaire:
l'astuce est d'utiliser
inline-flex
pour laparent
etinline-table
pour lachild
. Tout est dynamique. Je fais le tableau défilant horizontalement par l'ajout d'un autregrandparent
avecoverflow-x:scroll;
:Merci cela a fonctionné pour moi avec
flex-direction:column
, mais comme vous l'avez ditinline-flex
est le tour de ce.incroyable, cela fonctionne comme un remplacement direct pour l'affichage: flex dans mon cas
OriginalL'auteur sooon
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
OriginalL'auteur Manjunatha N