Largeur inconnue pour un nombre variable de colonnes

Question

Je souhaite organiser certains éléments dans une colonne. Je ne peux pas prédire la largeur ou la hauteur de l'article, ni la largeur ou la hauteur du conteneur. Je ne peux pas non plus prédire combien de colonnes contiendront ou quelle devrait être la largeur des colonnes. Je souhaite que le navigateur dispose les éléments dans le nombre maximum de colonnes sans dépasser la largeur du conteneur, tout en minimisant la hauteur du conteneur.

Cela a résolu le problème, mais existe-t-il une meilleure solution ? Cela peut-il être réalisé sans utiliser jQuery ? Cela peut-il être fait de manière à ce que les anciens navigateurs l'affichent correctement (peut-être en l'organisant en lignes plutôt qu'en colonnes) ?

<style>
#emballage {
    column-width: 100px; /* jQuery modifiera cette valeur */
    remplissage : 20 px ;
    bordure : 2 px, bleu uni ;
}
.article {
    remplissage : 50 px ;
    bordure : 2 px, vert uni ;
}
</style>
<div id="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Obtenez la largeur maximale des éléments enfants.
var largeurmax = 0 ;
jQuery('#wrapper .item').each(function() {
    var width = jQuery(this).outerWidth(true);
        si (largeur > maxWidth) {
            maxWidth = largeur ;
        }
    });
// Définit la largeur de colonne du wrapper sur la largeur maximale.
jQuery('#wrapper').css('column-width', maxWidth + 'px');
</script>

Answer 1

Vous pouvez utiliser une grille pour y parvenir

#wrapper {
    display: grid;
    grid-auto-flow: row;
    grid-gap: 20px;
    grid-template-columns: repeat(9, 1fr);   //将9更改为列数
}