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

    Div che si posizionino su due colonne "tipo Google+"

    Salve, sto cercando di realizzare un layout su due colonne (in realtà si tratta del tag <article></article> organizzato su due colonne a sinistra di un <aside></aside> contenente dei blocchi div di altezze differenti.
    Allo stato attuale la struttura è su due section con float: left e width: 50%
    codice:
    <article>
    <section><div id="1"></div><div id="3"></div></section>
    <section><div id="2"></div id="4"><div></div></section>
    </article>
    In questo modo i div si visualizzano affiancati e secondo un certo senso di lettura sinistra-destra e alto-basso, secondo l'ordine numerico che ho indicato con gli id... Nel momento in cui passo a una visualizzazione tipo smartphone, i due <section></section> vanno uno sotto l'altro con tutti i loro contenuti, e quindi si perde l'ordine numerico.
    Se associo una <section></section> a ogni div risolvo il problema dell'incolonnamento (e dell'ordine naturale di lettura) su smartphone, ma il div con id="3", finisce sotto id="1" ma allineato in orizzontale con id=2 che ha un'altezza maggiore di id=1, con conseguente spazio vuoto, mentre vorrei collocarlo (in automatico, dato che questi div hanno contenuti che variano coi vari aggiornamenti) nel primo spazio libero che trova sotto una delle due colonne, come avviene per esempio nel layout di Google+ cui la mia idea si vorrebbe ispirare.

    Questo è il CSS della <section></section>
    codice:
    section {
        padding: 0px 2px 0px 2px; 
        float: left; 
        width: 50%; 
        text-align: center; 
        background-color: inherit;
    }

  2. #2
    Aggiornamento.
    Mi sono imbattuto nella trattazione del tipo di layout cercandolo come "stile Pinterest", che tutto sommato è identico a quello di G+ che avevo notato...
    Occorre utilizzare una libreria Masonry che è in JavaScript. Funziona a dovere, ma resta un problema residuo che credo vada gestito da CSS.

    L'effetto Pinterest è applicato a un div article contenitore di vari div section (su due colonne larghe sempre 350px), ma article ha, sulla destra un altro div aside a larghezza fissa finché la larghezza dello schermo lo consente... Succede che se riduco la finestra del browser, article non si ridimensiona e quindi i div section non si dispongono su un'unica colonna; questo succede solo quando la larghezza della finestra diventa inferiore alla larghezza di article che contiene i due section affiancati, in pratica come se aside fosse escluso dal discorso...

  3. #3
    Ho caricato la pagina nella versione "in progress" cui sono giunto:
    http://dampyr.altervista.org/index_masonry.html
    Riducendo la larghezza della finestra, si nota che Edicola va sotto invece di organizzarsi i div su due colonne racchiusi dal box article su cui è riferita la libreria Masonry.

    La cosa strana è che, anche togliendo quel JavaScript (e quindi perdendo l'effetto Pinterest) quando si riduce la larghezza, il primo div a passare sotto resta Edicola, mentre su un altro file di esempio funziona bene solo perché no tengo bloccati i div header in alto!

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.