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

    Problemi di float con 3 elementi per riga

    Ciao a tutti, per la prima volta mi sto approcciando a fare modifiche lato css nel backend di Wordpress.

    Nel particolare, sto provando a ridefinire il posizionamento di alcuni elementi generati da un plugin per composizione di pagine, più precisamente un estensione di questo.

    Se con i primi elementi tutto procedeva in modo regolare, quando ho iniziato ad editare il testo all'interno di ogni elemento il layout si è sballato. Ovvero ottengo la prima riga con 3 elementi, la seconda con un solo elemento allineato a destra, la terza di nuovo con tre elementi e via dicendo.

    Il css che utilizzo per ognuno di questi elementi flottanti è il seguente:

    codice:
    elemento {
    width: 33.33%;
    float: left;
    }
    In allegato lo screenshot della situazione e il codice html di quella sezione di backend.


    Se serve qualche info in più, chiedete pure. Spero mi possiate aiutare, grazie in anticipo.

    Alessandro
    Immagini allegate Immagini allegate

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao, per poter comprendere meglio cosa sta avvenendo bisognerebbe vedere la pagina in azione e le altre eventuali regole css che influiscono su tali elementi; ma ad ogni modo, vedendo le immagini, posso dedurre che il problema sia legato al fatto che gli elementi non hanno tutti una stessa altezza. Il float infatti dispone gli elementi cercando di occupare lo spazio libero secondo due principali criteri: l'ordine di priorità con cui gli elementi si presentano nel DOM e il più in alto possibile.

    Dalle tue immagini si può vedere (anche se la differenza tra le altezze è minima) la situazione che schematizzo in questo modo (accentuando chiaramente le differenze):
    codice:
    Disposizione elementi flottanti
    con altezze differenti
     _________ _________ _________
    |         |         |         |
    |    1    |    2    |    3    |
    |         |         |         |
    |         |         |         |
    |_________|         |         |
              |         |_________|
              |_________|         |
                        |    4    |
                        |         |
                        |         |
                        |         |
     _________ _________|_________|
    |         |         |         |
    |    5    |    6    |    7    |
    |         |         |         |
    :         :         :         :
    In particolare 3 ha un'altezza maggiore di 1 e minore di 2.
    4 potrebbe mettersi sotto 1, secondo il criterio "il più in alto possibile", ma deve invece mettersi sotto 3 per soddisfare entrambe i criteri: "ordine di priorità" e "il più in alto possibile".
    4 infatti non può stare sotto 1 perché sarebbe una posizione in cui 2 e 3 non sono "conclusi"; deve stare quindi dopo la fine di 3, dove trova posto.

    Detto questo, puoi risolvere impostando un'altezza fissa. Oppure, se l'intenzione è quella di creare una disposizione a griglia, ad esempio usando flexbox. Noto però che probabilmente stai usando un sistema "sortable", per cui hai possibilità di spostare gli elementi; in questo caso non so quale potrebbe essere la soluzione più adatta senza rischiare di sfasciare qualcos'altro. Se puoi impostare un'altezza fissa forse è sufficiente quello. Fai delle prove.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Ciao Killer, intanto grazie mille dei suggerimenti. Nel mentre sono riuscito a risolvere la situazione e di fatto il problema era proprio dato dalle differenti altezze.

    All'interno di ogni box è possibile editare diverse opzioni, una su tutte inserire del contenuto. Ora non sto ad illustrare tutto il funzionamento dell'elemento interno, dico solo che io avevo inserito dell'html in uno dei due campi per il contenuto, il quale non lo renderizzava correttamente e mi generava dei box con altezze diverse (dovuto a stringhe di testo più lunghe).

    Nel secondo campo per il contenuto ho notato che c'è la possibilità di attivare la vista html, così ho inserito li il mio contenuto che nel front end viene visualizzato correttamente e nei box del backend non viene visualizzato, evitandomi così il problema delle altezze diverse.

    Ho apprezzato moltissimo il tuo intervento dettagliato, seppur abbia a che fare con i css ogni giorno da diversi anni, a volte capita di impiantarsi in cose che fanno diventare pazzi e aiutarsi tra esperti è la cosa migliore.

    Grazie di nuovo
    Immagini allegate Immagini allegate

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Bene, mi fa piacere che tu sia riuscito a risolvere
    Buon proseguimento.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Tag per questa discussione

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.