Ultima allineata a sinistra nella griglia centrale degli elementi

Ho un sacco di blocchi della stessa dimensione impostati per la display:inline-block in display:inline-block all’interno di un div che ha text-align:center impostato per allineare i blocchi.

 | _____ _____ _____ _____ | | | | | | | | | | | | | 1 | | 2 | | 3 | | 4 | | | |_____| |_____| |_____| |_____| | | _____ _____ _____ _____ | | | | | | | | | | | | | 5 | | 6 | | 7 | | 8 | | | |_____| |_____| |_____| |_____| | | | 

I blocchi riempiono il div orizzontalmente, e mentre la finestra del browser si restringe, alcuni blocchi si spezzano in nuove linee, creando più righe e meno colonne. Voglio che tutto rimanga centrato, con l’ultima riga allineata a filo a sinistra, in questo modo:

 | _____ _____ _____ | | | | | | | | | | | 1 | | 2 | | 3 | | | |_____| |_____| |_____| | | _____ _____ _____ | | | | | | | | | | | 4 | | 5 | | 6 | | | |_____| |_____| |_____| | | _____ _____ | | | | | | | | | 7 | | 8 | | | |_____| |_____| | | | 

Quello che succede attualmente è questo:

 | _____ _____ _____ | | | | | | | | | | | 1 | | 2 | | 3 | | | |_____| |_____| |_____| | | _____ _____ _____ | | | | | | | | | | | 4 | | 5 | | 6 | | | |_____| |_____| |_____| | | _____ _____ | | | | | | | | | 7 | | 8 | | | |_____| |_____| | | | 

Non riesco ad aggiungere extra filler div come un suggerimento, perché potrebbe esserci un numero qualsiasi di blocchi e la quantità di righe e colonne varierà in base alla larghezza del browser. Inoltre, non posso applicare direttamente il blocco n. 7, per lo stesso motivo. I blocchi devono rimanere sempre centrati, non importa quante colonne.

Ecco una penna per dimostrare meglio:

    È ansible? Mi sento come dovrebbe essere sicuro. Preferirei non usare flexbox poiché è solo ie10 +, e mi piacerebbe ie9 +. Mi piacerebbe davvero una soluzione CSS pura, ma se mi dici che JS è l’unico modo, mi piacerebbe vederlo in azione.

    Per riferimento – domande simili, anche se nessuna è stata completamente spiegata:

    Come allineare l’ultima riga / linea sinistra in una linea multipla

    CSS – Sinistra allinea l’ultima riga di immagini in un div centrato

    Correggere il centraggio dell’ultima riga di elementi nella griglia del contenitore di liquidi per essere allineati a sinistra mentre il contenitore rimane centrato

    Centrare più blocchi in linea con CSS e allineare l’ultima riga a sinistra

    Ecco una soluzione JavaScript molto semplice (e alcune piccole modifiche nel tuo CSS) per te:

    http://jsfiddle.net/ha68t/

    Funziona bene per me.

    CSS:

     .container { margin: 0 auto; max-width:960px; background-color: gold; } .block { background-color: #ddd; border:1px solid #999; display: block; float: left; height: 100px; margin: 4px 2px; width: 100px; } 

    JavaScript:

     $(document).ready(function(){ setContainerWidth(); }); $(window).resize(function(){ setContainerWidth(); }); function setContainerWidth() { $('.container').css('width', 'auto'); //reset var windowWidth = $(document).width(); var blockWidth = $('.block').outerWidth(true); var maxBoxPerRow = Math.floor(windowWidth / blockWidth); $('.container').width(maxBoxPerRow * blockWidth); } 

    jQuery è richiesto 🙂

    Soluzione con display inline-block

    Questa griglia adtriggers è molto più semplice: meno markup e meno CSS, quindi sarà più facile da implementare in un sito di produzione e adattarsi alle tue esigenze.

    = >> DEMO << = (ridimensiona la finestra dei risultati per vedere l’effetto)

     html, body { margin:0; padding:0; } #container{ font-size:0; margin:0 auto; width:1000px; } .block { font-size:20px; width: 150px; height: 150px; margin:25px; background: gold; display:inline-block; } @media screen and (max-width: 430px) { #container{ width:200px; } } @media screen and (min-width: 431px) and (max-width: 630px) { #container{ width:400px; } } @media screen and (min-width: 631px) and (max-width: 830px) { #container{ width:600px; } } @media screen and (min-width: 831px) and (max-width: 1030px) { #container{ width:800px; } } 
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    Per quello che vale: è ora il 2017 e il modulo di layout della griglia lo fa subito

     * { margin:0; padding:0; } .container { display: grid; grid-template-columns: repeat(auto-fill, 100px); grid-gap: 10px; justify-content: center; align-content: flex-start; margin: 0 auto; text-align: center; margin-top: 10px; } .block { background-color: #ddd; border: 1px solid #999; height: 100px; width: 100px; } 
     
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo
    Foo

    Con la flexbox, alcuni pseudo elementi, un div extra, e dopo un sacco di frustrazione, sono riuscito a ottenere questo risultato senza le media query (dato che avevo bisogno di inserire la mia griglia all’interno di elementi di dimensioni diverse, le query multimediali non avrebbero funzionato per me) .

    Un avvertimento: le grondaie tra gli oggetti sono fluide.

    Demo: http://codepen.io/anon/pen/OXvxEW

    CSS:

     .wrapper { display: flex; flex-wrap: wrap; border: 2px solid #ffc0cb; max-width: 1100px; margin: 0.5rem auto; justify-content: center; } .wrapper:after { content: ' '; flex: 1; height: 100%; border: 1px solid #00f; margin: 0.5rem; } .child { flex: 1; border: 2px solid #ffa500; min-width: 300px; margin: 0.5rem; text-align: center; } .child-contents { width: 300px; border: 2px solid #008000; height: 100px; margin: 0 auto; } 

    HTML:

     
    ...etc., more .child's...

    Il risultato finale è qualcosa del genere, in cui i rettangoli verdi sono div. I bordi rosa / arancioni sono solo per riferimento in modo da poter vedere cosa sta succedendo. Se rimuovi i bordi rosa / arancione, dovresti ottenere la griglia che stai cercando ( anche se di nuovo, nota che la grondaia è fluida ).

    inserisci la descrizione dell'immagine qui

    Usa la flexbox:

     .container { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; flex-wrap:wrap; } .block { background-color: #ddd; border:1px solid #999; display: inline-block; height: 100px; margin: 4px 2px; width: 100px; } 

    Fatto.

    Ad oggi, l’unica soluzione pulita per questo è con il

    Modulo layout griglia CSS ( Codepen demo )

    Fondamentalmente il codice rilevante necessario si riduce a questo:

     ul { display: grid; /* (1) */ grid-template-columns: repeat(auto-fill, 120px); /* (2) */ grid-gap: 1rem; /* (3) */ justify-content: center; /* (4) */ align-content: flex-start; /* (5) */ } 

    1) Rendi l’elemento contenitore un contenitore di griglia

    2) Imposta la griglia con una quantità “automatica” di colonne di larghezza 120 px. (Il valore di riempimento automatico viene utilizzato per layout reattivi).

    3) Imposta spazi vuoti / grondaie per le righe e le colonne della griglia.

    4) e 5) – Simile alla flexbox.

     body { margin: 0; } ul { display: grid; grid-template-columns: repeat(auto-fill, 120px); grid-gap: 1rem; justify-content: center; align-content: flex-start; /* boring properties: */ list-style: none; width: 90vw; height: 90vh; margin: 2vh auto; border: 5px solid green; padding: 0; overflow: auto; } li { background: tomato; height: 120px; } 
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    Non esiste una soluzione “normale” per il tuo problema, ma solo le “soluzioni alternative” citate.

    La situazione è che il contenitore di blocchi riempirà lo spazio disponibile fino al massimo disponibile / set-up e quindi interromperà tutti i blocchi interni alla riga successiva, causando un overflow del contenitore. Anche con altre configurazioni, come il floating, sarà lo stesso comportamento. È così che funziona il rendering, ogni volta avido nello spazio per calcolare il comportamento degli elementi interni.

    Forse le future Flexbox renderanno questo ansible – ma non ho letto le specifiche complete. Solo una supposizione…

    Prova questo con css semplice:

    CSS:

    .row {text-align: center; font-size: 0;} .block {text-align: center; display: inline-block; width: 150px; height: 15px; margin: 5px; border: 1px solid #dddddd; font-size: 13px;}

    HTML:

     
     .row{text-align:center;font-size:0;} .block{text-align:center;display:inline-block;width:150px;height:150px;margin:5px; border:1px solid #dddddd;font-size:13px;line-height:150px;} 
     
    1
    2
    3
    4
    5
    6
    7
    8