J'essaie de créer un carré contenant des rectangles contenant chacun un mot. La largeur totale de chaque rectangle d'enfant devrait égaliser le parent, mais le problème est que je ne connais pas la commande ni la longueur de chacun des mots, et à l'aide d'un filtre de recherche, je peux mettre à jour de manière dynamique le côté client de la liste, donc je peux 'T Attribuer statiquement une largeur / Rembourrage Code> / Margins à chacun des rectangles contenant. Pour illustrer mon problème, voici mon code actuel, avec une capture d'écran montrant ce que j'ai actuellement. <div class="index">
<!-- heading, filter input and other stuff here -->
<div class="books">
<div class="book">Lorem</div>
<div class="book">Ipsum</div>
<div class="book">is</div>
<div class="book">simply</div>
<div class="book">dummy</div>
<!-- rest of the book divs here -->
</div>
</div>
3 Réponses :
J'ai créé un petit violon avec Cela vous aide à étendre les noms de livre pour couvrir chaque rangée jusqu'à la fin.
Le pseudo flexbox sur https: // jsfiddle. NET / SAKSHAM_MALHOTRA / 52NZ7RPF /
après l'élément est utilisé pour quitter l'espace vide à la fin de la fin de la création des dernières cases couvrant toute la ligne.
Oh Wow, c'est fantastique! Je vais laisser cela inaccepté pendant un moment plus longtemps, mais l'acceptera si personne d'autre ne se présente. Merci!
Il suffit de fléchir le conteneur div et d'appliquer un flex à la classe enfant
p>
<div class="index">
<!-- heading, filter input and other stuff here -->
<div class="books">
<div class="book">Lorem</div>
<div class="book">Ipsum</div>
<div class="book">is</div>
<div class="book">simply</div>
<div class="book">dummy</div>
<div class="book">Lorem</div>
<div class="book">Ipsum</div>
<div class="book">is</div>
<div class="book">simply</div>
<div class="book">dummy</div>
<div class="book">Lorem</div>
<div class="book">Ipsum</div>
<div class="book">is</div>
<div class="book">simply</div>
<div class="book">dummy</div>
<!-- rest of the book divs here -->
</div>
</div>Je recommande d'utiliser CSS Flexbox pour ce comportement de présentation, car il s'agit essentiellement d'une ligne d'emballage avec des règles d'alignement particulières.
Il y a beaucoup de ressources Flexbox sur le Web, mais je recommande vivement " voici à peu près le CSS i Pensez réalisera le résultat souhaité: P> .books {
/* Flexbox stuff */
display: flex;
justify-content: space-between;
flex-flow: row wrap;
/* Other stuff */
background-color: lightgray;
}
.book {
/* Flexbox stuff */
flex-basis: content;
/* Other stuff */
margin: 1px;
background-color: darkgray;
}
J'utilise habituellement la grille CSS pour des choses comme ceci: CSS-Tricks.com/snippets / CSS / Complete-Guide-Grid-Grid Examinez l'exemple "Fonctions spéciales et mots-clés" dans le lien ci-dessus spécifiquement