Allineare il pulsante in basso al div

[allin81]

Buonasera
ho un piccolo problema con un pulsante
Come potete vedere dall'immagine di questo link

https://ibb.co/68W2Bjq

da desktop il pulsante "dettagli offerta" non è allineato perche' in alcune offerte ci sono 3 prezzi, in altre 2 ed in alcune solo 1

Logicamente dopo la variabile php del trattamento (dove mostro mezza pensione bevande escluse) ho aggiunto 2 <br>

Esiste un modo per allineare i pulsanti "dettagli offerta" sulla stessa riga senza tener conto di quanti prezzi ci sono nel div?

P.s utilizzo bootstrap 5 se può essere d'aiuto
Grazie

[KillerWorm]

Ciao, penso sia necessario prima di tutto impostare le celle (i div col) in modo che abbiano tutte la stessa altezza - o dando una dimensione fissa o usando qualche altro sistema come flexbox che permette di ottenere una stessa altezza per tutte le celle della stessa linea - a quel punto puoi impostare il pulsante in qualche modo - o con un posizionamento o usando sempre flexbox - così che sia spostato in basso alla propria cella.

Questo a grandi linee.

Prova magari a postare un po' di HTML per capire come meglio si può intervenire (non voglio andare a ripescare i tuoi esempi di codice dai tuoi altri post).

[allin81]

eccomi
allora una parte del codice per creare queste schede per le offerte è questo (sperando che il forum indenti bene il codice)

<div class="row">
   <div class="col-md-3 offertehotel">
			<span class="bold">Dal 01/05/2022 al 26/05/2022</span><br><br>
      <span class="h2">201 €</span> <span class="desc">- 3 Notti a persona</span> <span class="noteoff"></span><br>
      <span class="h2">268 €</span> <span class="desc">- 4 Notti a persona</span> <span class="noteoff"></span><br>
      <span class="h2">335 €</span> <span class="desc">- 5 Notti a persona</span> <span class="noteoff"></span><br>
      <span class="h2">402 €</span> <span class="desc">- 6 Notti a persona</span> <span class="noteoff"></span><br>
      <span class="h2">469 €</span> <span class="desc">- 7 Notti a persona</span> <span class="noteoff"></span><br><br>
      <span class="desc">Matrimoniale</span><br>
      <span class="desc">Mezza Pensione, bevande Escluse</span><br><br>
			<div class="d-grid gap-2">
				<button class="btn btndetoff" type="button">Dettagli Offerta</button>
			</div>
	</div>
</div>

La classe offertehotel è questa ho inserito proprio adesso height: 400px ed in effetti mi crea tutti box di 400 px di altezza (Anche dove non serve cosi' alto ma vabbe')
Il pulsante dettagli offerta non so proprio come metterlo sotto a tutto a questo div.

.offertehotel {
background: #ffffff;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
border-bottom: 5px solid #496c84;
padding: 10px;
height: 400px;
}

Ora non so se è questa la soluzione che consigliavi

P.S non avevo mai sentito parlare di flexbox

[KillerWorm]

Scusami per il ritardo.

Ho visto meglio, non hai bisogno di dare un'altezza fissa, bootstrap regola già in automatico l'altezza per ogni riga (usando appunto flexbox).


Rimuovi quindi quel height:400px; dal CSS e prova a strutturare le tue celle in questo modo:

<div class="d-flex flex-column col-md-3 offertehotel">
  <div>
    <span class="bold">Dal 01/05/2022 al 26/05/2022</span><br><br>
    <span class="h2">201 €</span> <span class="desc">- 3 Notti a persona</span> <span class="noteoff"></span><br>
    <span class="h2">268 €</span> <span class="desc">- 4 Notti a persona</span> <span class="noteoff"></span><br>
    <span class="h2">335 €</span> <span class="desc">- 5 Notti a persona</span> <span class="noteoff"></span><br>
    <span class="h2">402 €</span> <span class="desc">- 6 Notti a persona</span> <span class="noteoff"></span><br>
    <span class="h2">469 €</span> <span class="desc">- 7 Notti a persona</span> <span class="noteoff"></span><br><br>
    <span class="desc">Matrimoniale</span><br>
    <span class="desc">Mezza Pensione, bevande Escluse</span><br><br>
  </div>
  <div class="d-grid gap-2 mt-auto">
    <button class="btn btndetoff" type="button">Dettagli Offerta</button>
  </div>
</div>

In rosso le parti che devi aggiungere.
d-flex flex-column stanno per display:flex; flex-direction:column; cioè il contenitore diventa un elemento flex con i contenuti allineati in colonna.

E' necessario avvolgere i vari testi con un ulteriore <div> perché questi non subiscano direttamente gli effetti di flexbox.

Avrai quindi due <div>, uno con tutti i testi e uno con il solo button.

Al <div> col button, ho applicato mt-auto che sta per margin-top:auto;. Questa regola, assieme a flex, applicherà un margine alto in modo che il div si porti quanto più possibile verso il basso.

Questa è una soluzione, ma potrebbero essercene varie altre.

Prova e fai sapere.

P.S non avevo mai sentito parlare di flexbox

Esiste già da diversi anni. Viene usato per risolvere molteplici situazioni nella la strutturazione del layout. Tieni conto che bootstrap si basa su flexbox. Potrebbe tornarti utile approfondire l'argomento.

[allin81]

wow, mi sa che era proprio la soluzione che cercavo

ecco l'immagine di come esce adesso

https://ibb.co/FwxvMty

Grazie, veramente ottimo