0
votes

Comment puis-je vous assurer qu'un élément enfant spécifique est toujours affiché dans un parent, même lorsque le contenu est trop grand pour s'adapter à tous les enfants?

J'ai un élément parent avec Affichage: flex code> qui contient un groupe d'enfants. Le problème est que, parfois, il y a trop d'enfants pour s'adapter correctement à l'intérieur du parent.

Cependant, je voudrais que, peu importe quoi, s'il y a trop d'enfants, le dernier élément visible dans le parent devrait toujours être le élément avec la classe toujours-montrer code>. p>

En d'autres termes, si j'ai un parent capable de soutenir 3 enfants, mais il y a en fait plus de trois, je veux que ça regarde Comme ceci: p>

p>

Y a-t-il une façon de forcer le dernier élément (le plus ... code>) pour rester coincé à droite et ne pas être poussé hors du div code>? Comme vous pouvez le voir dans mon extrait, la boîte jaune s'affiche et le plus ... code> n'est pas. Je voudrais que la boîte jaune soit cachée et que le plus ... code> Pour afficher p>

p>



<div class="parent">
  <div class="child brown"></div>
  <div class="child pink"></div>
  <div class="child green"></div>
  <div class="child yellow"></div>
  <div class="always-show"><a>More...</a></div>
</div>

html css flexbox

2 commentaires

Je n'ai pas compris mais comme je vois que vous voulez que vous souhaitiez créer un lien pour montrer de plus en plus, pour cela, vous pouvez utiliser JQuery Ref. Codepen.io/stanyy/pen/qevyvo

Je préférerais ne pas avoir à utiliser JavaScript

3 Réponses :

0
votes

Vouliez-vous quelque chose comme ça?

<div class="p-parent">
<div class="parent">
  <div class="child brown"></div>
  <div class="child pink"></div>
  <div class="child green"></div>
  <div class="child yellow"></div>
  <div class="always-show"><a>More...</a></div>
</div>
</div>

0 commentaires

0
votes

Pour statique NO d'enfant, vous pouvez donner la commande à la boîte jaune comme ci-dessous

<div class="parent">
  <div class="child brown"></div>
  <div class="child pink"></div>
  <div class="child green"></div>
  <div class="child yellow"></div>
  <div class="always-show"><a>More...</a></div>
</div>

0 commentaires

1
votes

Utiliser Position: Sticky Code>

P>



<div class="parent">
  <div class="child brown"></div>
  <div class="child pink"></div>
  <div class="child green"></div>
  <div class="child yellow"></div>
  <div class="always-show"><a>More...</a></div>
</div>
<div class="parent">
  <div class="child brown"></div>
  <div class="child pink"></div>
  <div class="always-show"><a>More...</a></div>
</div>

2 commentaires

Y a-t-il un moyen simple de ne pas montrer plus ... dans le deuxième exemple? Comme il n'y a que deux éléments, je ne veux pas qu'il dise plus ...


                                                
                                                                                            
                                                    jolies choses! Merci


            
                
		    
                    Articles qui pourrait vous intéresser :
                                            
                            Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO                        
                        
                                            
                            Select2 ne s'affiche pas correctement dans le mode bootstrap                        
                        
                                            
                            Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?                        
                        
                                            
                            Comment puis-je définir un format pour les nombres d'entrée dans Blazor