Dev Faq
0
votes

Boutons de doublure

J'ai 3 paragraphes côte à côte, chacun avec un bouton en dessous. Lorsque la taille de l'écran change la longueur des paragraphes qui déplace les boutons hors ligne les uns avec les autres.

Y a-t-il un moyen de le faire si un bouton se déplace dans les autres se déplacera avec elle afin qu'ils restent tous en ligne?

1 commentaires

Il y a un bon guide pour la hauteur égale ici, ce qui, à mon avis, est la nature de votre problème. w3schools.com/howto/howto_csss_equal_height.asp

3 Réponses :

0
votes

oui.

Vous devez d'abord envelopper le paragraphe avec son bouton en fonction d'un élément d'emballage.

Ensuite, vous devez vous assurer que ces éléments d'emballage ont toujours la même hauteur.

Enfin, vous devez positionner les boutons. Ici, vous pouvez utiliser Flexbox. Jetez un coup d'œil à la propriété de la propriété justifie.

0 commentaires
0
votes

Il est assez simple d'atteindre cet objectif en utilisant Flex :

  1. ajoutez un parent
    code> au paragraphe code> et bouton code> éléments. li>
  2. Donnez-leur un Affichage: flex code> et justify-contenu: espace entre code>. li> ol>

    Ceci sera suffisant pour toujours faire aligner les boutons les uns avec les autres en bas. p>

    p> 

    <section>
    <article><h1>1</h1><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est mollitia beatae repudiandae assumenda rerum reprehenderit, soluta quam laudantium vero doloribus reiciendis quidem accusantium delectus amet facere consequatur eum, suscipit consectetur iure eligendi, impedit non. Corporis exercitationem qui consectetur ipsa quam.</p><button>read more</button></article>
    <article><h1>1</h1><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est mollitia beatae repudiandae assumenda rerum reprehenderit, soluta quam laudantium vero doloribus reiciendis quidem accusantium delectus amet facere consequatur eum, suscipit consectetur iure eligendi, impedit non. Corporis exercitationem qui consectetur ipsa quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, adipisci?</p><button>read more</button></article>
    <article><h1>1</h1><p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quibusdam laudantium illo quidem expedita beatae ratione quaerat culpa dolorem reprehenderit numquam provident aliquid molestiae sint voluptate, dolore repudiandae nemo impedit? consectetur, adipisicing elit. Est mollitia beatae repudiandae assumenda rerum reprehenderit, soluta quam laudantium vero doloribus reiciendis quidem accusantium delectus amet facere consequatur eum, suscipit consectetur iure eligendi, impedit non. Corporis exercitationem qui consectetur ipsa quam.</p><button>read more</button></article>
</section>

0 commentaires
0
votes

Le moyen le plus simple d'atteindre cela pourrait être: Faites de votre conteneur de paragraphe même hauteur em> et mettez votre bouton à la fin du conteneur em> du paragraphe et faites sa position absolue forte> et le conteneur parent doit être relatif fort>. Dans ce cas si si la hauteur de paragraphe change la position du bouton ne changera pas car il est sorti du flux de contenu pour une position absolue em>.

p> 

<div class="container">
  <div class="card">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus lobortis massa, at maximus erat. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sem sapien, dictum congue elit quis, ultrices aliquam nunc. Phasellus bibendum augue augue, eget pharetra dolor faucibus eget. Vestibulum facilisis eros mollis, dictum mauris in, pharetra lacus. Aliquam sollicitudin sagittis magna, Suspendisse ullamcorper non leo tincidunt congue. Phasellus convallis mollis eros, sit amet sagittis orci auctor eu. Praesent erat orci, tempor at commodo ut, vulputate quis est. Nulla nec auctor nulla, a tincidunt massa.
    </p>
    <button class="btn">lulu</button>
  </div>
  <div class="card">
    <p>
      Vivamus volutpat lorem molestie congue tempor. Phasellus in ligula urna. Aliquam mi lectus, gravida eget tincidunt in, mattis vitae nibh. Suspendisse ullamcorper non leo tincidunt congue. Phasellus convallis mollis eros, sit amet sagittis orci auctor eu. Praesent erat orci, tempor at commodo ut, vulputate quis est. Nulla nec auctor nulla, a tincidunt massa.

      Integer nec dui ipsum. Vivamus malesuada id diam ac iaculis. Aliquam aliquam sagittis tortor non fringilla. Nullam maximus cursus leo quis dignissim. Nullam vehicula elit sit amet libero congue, id condimentum nibh dignissim. Nulla facilisi. Sed pretium tincidunt scelerisque. Nam accumsan sed diam vitae sagittis. Nam facilisis ex nisi, venenatis interdum ante tristique sit amet. Pellentesque consequat non magna a hendrerit. Integer laoreet sapien enim, nec pharetra est aliquam nec. Etiam ut euismod augue, ut feugiat turpis. Aenean pulvinar nec ligula vitae bibendum. Nam hendrerit leo ac vulputate maximus. Sed eu tincidunt est.</p>
    <button class="btn">lulu</button>
  </div>
  <div class="card">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus lobortis massa, at maximus erat. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sem sapien,

      Vivamus volutpat lorem molestie congue tempor. Phasellus in ligula urna. Aliquam mi lectus, gravida eget tincidunt in, mattis vitae nibh. Suspendisse ullamcorper non leo tincidunt congue. Phasellus convallis mollis eros, sit amet sagittis orci auctor eu. Praesent erat orci, tempor at commodo ut, vulputate quis est. Nulla nec auctor nulla, a tincidunt massa.

      Integer nec dui ipsum. Vivamus malesuada id diam ac iaculis. Aliquam aliquam sagittis tortor non fringilla. Nullam maximus cursus leo quis dignissim. Nullam vehicula elit sit amet libero congue, id condimentum nibh dignissim. Nulla facilisi. </p>
    <button class="btn">lulu</button>
  </div>

</div>

0 commentaires

Articles qui pourrait vous intéresser :

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher
Changer la direction de défilement de la page Web sur la version mobile
Target first-child css styled-components