2015-09-11 6 views
5

Sto provando a centrare una lista di elementi fluttuanti, ma dato che si tratta di una muratura, non posso renderli inline. sarebbe necessario Un contenitore, questo è ovvio, ma non riuscivo a trovare da nessuna parte come ce la fanno fare questo:Come rendere l'elemento genitore adatto ai bambini flottati purché non siano più larghi della finestra?

Ignora i margini qui, non importa, è solo così ogni separata elemento figlio può essere visto. E sì, il genitore non è centrato, ma potrebbe essere. La parte importante è che si adatta dinamicamente agli elementi del bambino e la sua larghezza non è sempre al 100%.

Già provato a flottare il genitore, in tal caso gli elementi figli formano solo una singola colonna.

+0

La domanda è leggermente non chiara, ma interessante. Hai provato a usare flexbox? –

+0

Potresti pubblicare qualsiasi codice o le tue idee usando JS fiddle? In modo che avremo più comprensione sulla questione. –

+1

Non sono sicuro di aver capito correttamente cosa intendi. Quindi hai un contenitore che usa la muratura per mostrare i tuoi bambini. E il problema che devi affrontare è che: 1 - devi avere una larghezza fissa del genitore per farlo funzionare? o 2- 100% della larghezza del genitore non fa il trucco o 3 -? Si può provare a fornire un'immagine con il problema del layout. –

risposta

2

Perché non basta impostare la larghezza del genitore il prodotto di quello del numero massimo di bambini con larghezza di ogni bambino (se la larghezza del bambino è costante)?

var x = $(child).outerWidth(); 
$(window).resize(function() { 
     $(parent).width(Math.floor($(window).width()/x)*x); 
}); 
+0

Presumo perché i bambini vengono aggiunti al volo dopo che il contenitore è già configurato e creato. –

+0

@DianaR che non dovrebbe avere importanza finché la larghezza del bambino è costante (come mostrato nella gif). –

+0

rispetto a ciò che suggerisci deve essere eseguito ogni volta che viene aggiunto un nuovo bambino, è questo che intendi? –

Problemi correlati