Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    Problema con div allineati (h) e immagini responsive

    Salve a tutti! Domandina tecnica; sto realizzando un div con proprietà display:table per allineare cinque div "celle" (con proprietà table-cell).
    A loro volta i div contengono delle immagini pulsante che, non essendo tutte delle stesse dimensioni per incomprensioni con il grafico, devono avere larghezza personalizzata per dare un'idea di unità. Quindi non ho potuto usare dimensioni in percentuale per renderle responsive, ma sarebbe il minore dei problemi.
    Quello che vorrei ottenere tramite media queries è che, a una progressiva diminuzione dello schermo, le celle "scorrano" su più righe come farebbe del testo normale, fino ad arrivare nel caso di schermi piccolissimi a un display inline-flex con le immagini una sotto l'altra in verticale.
    Quest'ultima parte l'ho realizzata senza problemi, ma non ho idea di come far "andare a capo" i div cella quando lo schermo non è grande abbastanza per averli tutti allineati, ma troppo grande per avere una sola linea verticale.
    A parole mi spiego malissimo, lo so. Vi mostro due screen per capire.


    In questa immagine ci sono i div allineati orizzontalmente per schermi con risoluzione alta. E fin qui tutto funziona. (L'altezza non è omogenea per il problema che vi dicevo sopra, con alcuni "bambolotti" di dimensioni diverse rispetto alle altre.)
    Quello che vorrei fare sarebbe, nel caso in cui lo schermo non sia grande per mostrarli tutti e cinque, mandarne di volta in volta uno, due, tre "a capo", allineati in una seconda row.

    Invece, su schermi piccoli (es. mobile) si presenta così, e anche in questo caso tutto funzionante, nessun problema.


    Ma quello che voglio evitare è questo;

    Ovvero che con una risoluzione comunque larga si ottenga il menu con display inline-flex (uno sotto l'altro), che a queste dimensioni è dispersivo con troppi "vuoti"; per questo mi chiedevo se fosse possibile ottenere l'allineamento sulla stessa riga solo dei div che "ci stanno" materialmente, da un massimo di 5 a un minimo di 1. Una via di mezzo, insomma. Però non ho la più pallida idea di come fare e il fatto di essere pure un bel po' arrugginita (da quasi cinque anni non mettevo mano a progetti di codice) non aiuta.

    Mi aiutate a capire se c'è n modo per ottenere il risultato che vorrei? Grazie!
    Ultima modifica di cristy86italy; 18-06-2021 a 20:13

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ciao, sì, un modo c'è, e forse anche più di uno.

    Puoi provare ad applicare questa roba sul div principale:
    codice:
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    In tal caso non avrai bisogno di nient'altro; rimuovi quindi le eventuali varie regole definite nelle media query e le proprietà table dai vari elementi.

    Il contenitore definito in questo modo fa tutto il lavoro disponendo gli elementi al centro e distribuendoli su più righe se non dovessero stare più su un'unica riga.

    Prova e fai sapere.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao, sì, un modo c'è, e forse anche più di uno.

    Puoi provare ad applicare questa roba sul div principale:
    codice:
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    In tal caso non avrai bisogno di nient'altro; rimuovi quindi le eventuali varie regole definite nelle media query e le proprietà table dai vari elementi.

    Il contenitore definito in questo modo fa tutto il lavoro disponendo gli elementi al centro e distribuendoli su più righe se non dovessero stare più su un'unica riga.

    Prova e fai sapere.
    Ho seguito il tuo suggerimento e funziona perfettamente!! Grazie infinite! ^_^

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Bene
    Buon proseguimento.
    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 © 2025 vBulletin Solutions, Inc. All rights reserved.