Visualizzazione dei risultati da 1 a 7 su 7
  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
    5,682
    Ciao, flexbox è sicuramente un valido strumento per risolvere situazioni del genere. Hai provato ad andare in questa direzione?
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  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
    5,682
    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.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  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
    5,682
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

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.