J'essaie de créer un système de menus avec une image et du texte au-dessus et en dessous. Les données sont dynamiques. Je veux que le système de menus apparaisse de sorte que chaque image soit à égale distance l'une de l'autre afin qu'elles s'alignent dans une grille d'images à la fois horizontalement et verticalement.
Le problème est le texte. Si le texte est plus long que l'image, la div est agrandie. Cependant, cela crée un espace gênant car les images ne sont plus espacées de manière égale.
Pour contourner ce problème, je pense que la meilleure approche serait d'avoir chacune des autres divisions pour adopter la taille de la plus grande division. Cependant, je ne sais pas comment procéder.
J'ai essayé avec flexbox en utilisant la flex-wrappropriété. Bien que ça se passe bien, je n'ai pas été en mesure de trouver un moyen d'obtenir que chacune des images s'aligne à égale distance les unes des autres.
Comment dois-je procéder pour y parvenir?
Mon code est le suivant:
#outer {
display: flex;
}
#main {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border: solid black 25px;
border-radius: 25px;
width: 450px;
height: 500px;
padding: 20px;
}
.section {
background-color: #ddd;
padding: 15px;
}
.label, .icon {
text-align: center;
}<div id="outer">
<div id="main">
<div class="section">
<div class="label">Label 1AAAAAAAAAAA</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 1B</div>
</div>
<div class="section">
<div class="label">Label 2A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 2B</div>
</div>
<div class="section">
<div class="label">Label 3A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 3B</div>
</div>
<div class="section">
<div class="label">Label 4A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 4B</div>
</div>
<div class="section">
<div class="label">Label 5A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 5B</div>
</div>
</div>
</div>PS. Je ne sais pas non plus pourquoi mes divs de section augmentent leur hauteur. Donc, toute idée à ce sujet serait également appréciée.
align-itemsdéfiniestretchpar défaut. Vous pouvez facilement changer cela:align-items: flex-start;Réponses:
Je ne sais pas si vous pouvez faire en sorte que chaque élément devienne aussi grand que le plus grand élément, mais si vous pouvez supposer que vous voulez un nombre spécifique d'éléments dans chaque ligne, alors faites-leur simplement la même taille. Je pense que c'est beaucoup plus facile à faire avec une grille css au lieu de flexbox. Voir la solution ci-dessous. J'utilise la grille pour positionner les éléments de la section ainsi que pour m'assurer qu'à l'intérieur de chaque section les trois parties (texte du haut, image, texte du bas) prennent exactement 1/3 du div chacune - c'est pour s'assurer que toutes les images s'alignent également verticalement . De plus, j'utilise flex dans les étiquettes pour m'assurer que les textes sont au milieu (horizontalement et verticalement).
la source
Essayez ce codepen rapide. Une chose qui manque est la requête des médias pour savoir comment se comporter quand elle ne peut pas tenir 3 colonnes d'affilée pour lesquelles je ne changerais que la
max-widthpropriété d'être50% - individual item padding left and right - how much space you want betweenet changerflex: 1 33%enflex: 1 55%(Vous pouvez ignorer la valeur de remplissage si vous modifiez le fonctionnement du dimensionnement de votre boîte de sorte que la largeur inclut le remplissage dans sa largeur avec la propriété de dimensionnement de boîte comme celle-ci )
https://codepen.io/mihaelnikic/pen/bGGPBYG
CSS :
la source
J'espère que cela vous aidera.
CSS
HTML
la source
Vous pouvez essayer d'ajouter de la largeur et un saut de mot au conteneur d'étiquettes et d'ajuster la largeur en conséquence
la source
Si je comprends bien votre problème, l'écart étrange dont vous voulez vous débarrasser est celui de la deuxième rangée une fois la première rangée terminée. Si c'est tout ce que vous essayez de résoudre, alors peut-être que tout ce que vous avez à faire est de passer
justify-contentdespace-betweenàflex-startavec une marge ajoutée à vos.sectionéléments et le remplissage de votre#mainajusté pour correspondre. L'espacement sera désormais de 20 pixels entre toutes les images.Si vous ne aimez pas à quoi ça ressemble, vous pouvez essayer d' autres
justify-contentvaleurs telles queflex-start,flex-end,space-around,space-evenly.Alternativement, vous pouvez vous en débarrasser
justify-contentet les utiliserflex-growpour les étendre.sectionen fonction de leur environnement.Alternativement, si vous voulez que leurs gouttières s'alignent tout en se développant pour s'adapter
.sectionau contenu de chaque élément, vous pouvez essayer d'utiliserdisplay: tableplace.L'inconvénient ici est que vous devez diviser le code HTML en lignes.
Si vous voulez vraiment que tous les
.sectionéléments se développent soient égaux au plus grand.sectionélément,vous devrez probablement utiliser JavaScript car les éléments frères en CSS ne se connaissent pas beaucoup.
Vous pouvez ajouter le JavaScript suivant à votre page et ajuster le CSS en tant que tel:
la source
Je suggère également CSS Grid.
Vous spécifiez 3 colonnes et 2 lignes qui partagent la largeur également entre elles, et dites aux sections d'avoir une petite marge pour montrer les espaces entre elles:
la source
Une solution CSS pure avec tous ces critères est, je pense, impossible, mais une solution JS combinée avec CSS Grid est possible.
Une solution CSS pure où l'élément s'adapte dynamiquement au texte et aux ensembles qui changent en tous les autres éléments n'est pas possible. Nous pouvons définir dynamiquement la largeur de l'élément pour l'adapter au texte, mais nous ne pouvons pas faire de cette largeur le minimum pour tous les autres éléments qui ont la même classe.
la source
divet laissez les rembourrages, les bordures. et lemin-widthetmin-heightdans l'ensemblediv.Ça y est:
vérifier https://jsfiddle.net/sugandhnikhil/b216mx5d/
redimensionnez la fenêtre pour voir la sapqation équivalente entre l'image !!!!
Merci beaucoup!!!!!!!
:-)
la source
Je me demande juste pourquoi laisser la longueur du texte définir la taille du
div? Cela ne rendrait-il pas l'interface utilisateur bizarre? Je suggère de définir la largeur de l'étiquette et tout débordement de texte à devenirellipsis (...). Avec cela, il n'y a pas besoin deJavaScriptcodes, juste quelques autrescsspour votre.label. Voici un extrait. Cela aurait l'air tellement mieux que dedivchanger vos tailles chaque fois qu'il y aura un long texte.Si vous vous demandez "comment mes téléspectateurs peuvent-ils lire le reste du texte?" alors vous pouvez simplement appliquer des effets
on hoverà votreellipsiscomme cet échantillon de codepen (échantillon pas le mien) ou peut-être essayer quelque chose comme cette solution SO .J'espère que cela t'aides!
la source
C'est un angle légèrement différent de ce que suggèrent les autres réponses. Vous pourriez éventuellement envisager de tronquer le texte.
la source