Visualizzazione dei risultati da 1 a 7 su 7

Discussione: Centrare div flottati con stessa classe, ma con un margine prestabilito tra di loro

  1. #1

    Centrare div flottati con stessa classe, ma con un margine prestabilito tra di loro

    Salve, nonostante il problema sia trattato nel forum, le soluzioni proposte non risolvono il mio caso...

    Ho una serie, destinata a crescere, di div accomunati dalla medesima classe, sono dei riquadri con dentro un'immaginetta e un testo.
    Desidero che questi div siano centrati a riempire la riga del loro contenitore, conservando però un margine fisso tra essi, e che nell'ultima riga siano centrati anche se non la occupano tutta.
    Attualmente ho impostato le cose così, seguendo un po' di riferimenti ed esempio:
    codice:
    .articolo { // il generico contenitore della pagina
        width: 694px;    float: left;
        text-align: center;
        padding: 2px 7px;
        background: inherit;
        clear: both;
    }
    
    .flottati { // i vari div affiancati
        float: left;
        margin: 5px;
        padding: 3px;
        width: 118px;
        text-align: center; 
        border: 1px solid;
    }
    Ho anche tentato vie brutali, tipo il vecchio
    codice:
    <center></center>
    ma senza ottenere alcun cambiamento; i .flottati restano addossati a sinistra, con conseguente pessimo risultato in visualizzazione da smartphone...

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,058
    Ciao, flexbox è sicuramente un valido strumento per risolvere situazioni del genere. Hai provato ad andare in questa direzione?
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    No, la strada flexbox non l'ho percorsa, vediamo cosa ottengo.

  4. #4
    Poiché .articolo è una classe che riutilizzo nella pagina, ho inserito un nuovo div intermedio tra .articolo e i vari .flottati, dando caratteristiche di flexbox, ma non riesco a mandare a capo i .flottati quando termina lo spazio.
    Sto provando varie combinazioni (non sono esperto di flexbox), ma il risultato non si schioda dai .flottati affiancati dal primo all'ultimo.

    ---

    Edit.
    Parzialmente risolto con display: inline-block;
    Ma mi toglie un div da ogni riga: c'è spazio per 5 e me ne mette 4... Devo per forza ridurre il margin.
    Ultima modifica di Gas75; 11-07-2018 a 12:21

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,058
    In teoria potrebbe non servire il float se utilizzi flexbox, anzi, potrebbe dargli fastidio.
    Prova a postare il link alla pagina in questione, se posso gli do uno sguardo.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  6. #6
    Con flexbox era del tutto insensibile al float, con o senza non cambiava nulla.
    Ho sistemato con display: inline-block e ridotto i margin da 5px a 3px ed è tornato tutto a posto, incluso il centramento della riga di div incompleta.
    Ovviamente ho cambiato i nomi alle classi dato che non sono più div flottati ma inlineboxati.

    Grazie alla prossima.

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,058
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

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