Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2016
    Messaggi
    3

    Evitare che un div con proprietà "float" vada a capo

    Buongiorno, sto realizzando un sito responsive (uso Bootstrap), ma ho un problema su un elemento.

    Questa la parte di sito interessata:

    desktop.jpg
    Su mobile la sezione si comporta così:
    mobile.jpg
    Io vorrei che l'icona con la foto di ogni persona rimanesse sempre a sinistra, anche in presenza di un nome molto lungo.

    Al momento icona e testi sono in due div separati con proprietà float:left.
    Avrei usato col-xs-1 (o 2) e col-xs-10 (o 11) ma su desktop la colonna contenente le icone/foto diventa troppo larga.

    Questo il codice di una sezione:

    codice:
    <div class="row">
       <div class="colonna col-sx">
         <img class="profile-pic" src="img/foto.jpg">
       </div>
       <div class="colonna col-dx">
         <p class="testo-tipo-1">Nome Cognome <small class="text-muted">
         <br class="visible-xs"><a href="#"> dettagli</a></small><br>
         <span class="testo-piccolo">testo piccolo</span></p>
         <p> <span class="testo-tipo-2 text-uppercase">gruppo </span> </p>
         <button type="button" class="bottone"><small>bottone &gt;</small></button>
       </div>
    </div>

    Come posso procedere per far si che l'icona/foto rimanga sempre a sinistra del blocco di testo anche su viewport strette?

    [edit] ho fatto confusione scrivendo il titolo: NON voglio che vada a capo. Il titolo del thread dovrebbe essere "Evitare che un div con proprietà float vada a capo". Scusate... ^^;
    Ultima modifica di Abri; 16-02-2016 a 17:08

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Non so se e` una soluzione che ti puo` servire.
    Potresti dare al blocco con la foto
    float:left;
    width: 100px;
    /un numero a caso, poi lo sistemi come vuoi */
    e al blocco del nome, testo piccolo e gruppo:
    margin:left: 101px; /* da regolare in funzione dell'altro */
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2016
    Messaggi
    3
    Grazie per la risposta, Mich, ma dare dimensioni fisse in pixel non credo sia consigliatissimo quando si vuole sviluppare un sito responsive (credo).

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Puoi usare le unita` di misura piu` opportune.
    L'importante e` che usi la stessa nei due casi (che poi e` la misura che dai al blocco che contiene la foto)
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2016
    Messaggi
    3
    Eh, questo è il problema, credo. Il punto è che vorrei la colonna a sinistra di misura fissa, quella a destra fluida...

    [edit]
    ho risolto con una media query: sotto i 480px assegno una larghezza fissa in percentuale alle due colonne.
    Ultima modifica di Abri; 16-02-2016 a 23:28

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 © 2025 vBulletin Solutions, Inc. All rights reserved.