0
votes

Alignez le bouton vert à la fin de chaque div en CSS

J'ai ce bouton "Acheter" (comprar) que j'aimerais mettre à la fin de DIV afin qu'ils soient alignés les uns avec les autres "Acheter".

par exemple: p>

<div id="content01">
    
  <div class="produto">Some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

  <div class="produto">Some text text some text some text some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

  <div class="produto">Some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

  <div class="produto">Some text Some text Some text Some text Some text Some text Some text Some text Some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

</div>

html css flexbox

1 commentaires

Est-ce que cela répond à votre question? alignez un élément au bas avec Flexbox

3 Réponses :

1
votes

Est-ce ce que tu veux? Il a utilisé la position absolue.

https://jsfiddle.net/usv7jlhm/ < Pré> xxx

0 commentaires

0
votes

Utiliser flex strong> j'ai commenté les modifications que j'ai faites dans le code: https://jsfiddle.net/3jennapsb

<div id="content01"> <div class="produto">Some text<br><br><br><b>$ 20.00</b><br><br> <br><span class="comprar_button">COMPRAR</span> </div> <div class="produto">Some text text some text some text some text<br><br><br><b>$ 20.00</b><br><br> <br><span class="comprar_button">COMPRAR</span> </div> <div class="produto">Some text<br><br><br><b>$ 20.00</b><br><br> <br><span class="comprar_button">COMPRAR</span> </div> <div class="produto">Some text Some text Some text Some text Some text Some text Some text Some text Some text<br><br><br><b>$ 20.00</b><br><br> <br><span class="comprar_button">COMPRAR</span> </div> </div>

0 commentaires

1
votes

Attribuer Affichage: flex code> à votre .produto code> divs, avec flex-direction: colonne code> et align-items: Centre code>. Ajoutez ensuite Margin-top: auto code> au .commet_button code> pour le déplacer au bas du conteneur (et retirez d'autres choses superflues, voir ci-dessous):

P>



<div id="content01">
    
  <div class="produto">Some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

  <div class="produto">Some text text some text some text some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

  <div class="produto">Some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

  <div class="produto">Some text Some text Some text Some text Some text Some text Some text Some text Some text<br><br><br><b>$ 20.00</b><br><br>
      <br><span class="comprar_button">COMPRAR</span>
  </div>

</div>

0 commentaires