Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,875

    Allineare il pulsante in basso al div

    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

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    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).
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,875
    eccomi
    allora una parte del codice per creare queste schede per le offerte è questo (sperando che il forum indenti bene il codice)
    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.
    codice:
    .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
    Ultima modifica di allin81; 19-05-2022 a 13:04

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    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:

    codice:
    <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.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,875
    wow, mi sa che era proprio la soluzione che cercavo

    ecco l'immagine di come esce adesso

    https://ibb.co/FwxvMty

    Grazie, veramente ottimo

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.