Div multi flottanti centrati in un layout liquido

Ho un'idea per un layout che vorrei utilizzare, ma non riesco a farlo funzionare correttamente. Spero che qualcuno qui possa essere in grado di aiutare mentre ho passato ore a cercare.Div multi flottanti centrati in un layout liquido

Il layout è così.

Un involucro div ospita 6 bambini div. Le divs secondarie devono essere centrate allo ALL indipendentemente dalla dimensione del div wrapper.

<html> 
<head> 
<title>Testing</title> 
<style> 
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; } 
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; } 
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; } 
</style> 
</head> 
<body> 

<div id="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <br class="clear" /> 
</div> 

</body> 
</html>

Il problema è quando il browser viene ridimensionato più piccolo e una scatola è buttato sulla riga sotto le caselle sarà scendere a sinistra, mentre io voglio che siano sempre centrati. È possibile utilizzare il css puro o devo usare qualche jQuery?

fonte

2010-10-12 Craig Ward

non sono mai centrato per me utilizzando il tuo codice? –

Probabilmente la soluzione più semplice è la rimozione del float: lo stile di sinistra dalle caselle e la proprietà di visualizzazione in blocco inline. Quindi tutto quello che devi fare è allineare il testo: centrato sul wrapper.

<html> 
<head> 
<title>Testing</title> 
<style> 
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; } 
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center } 
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; background: #fff; display:inline-block } 
</style> 
</head> 
<body> 

<div id="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <br class="clear" /> 
</div> 

</body>

È possibile verificare il codice qui: http://jsbin.com/uqamu4/edit

fonte

2010-10-12 10:03:58

Probabilmente la soluzione migliore, ma non funzionerà in IE6 e 7 –

Ciao Viktor, il problema è che le scatole non si avvolgono. Voglio che questo display funzioni su qualsiasi dispositivo. Ad esempio, il laptop normale mostrerà probabilmente 3 scatole affiancate, ma un iphone dovrebbe mostrarne solo uno sopra l'altro. Ma se qualcuno cambia la finestra in modo che picchia una casella alla riga successiva, dovrebbe comunque centrare tutte le caselle –

In realtà, ignorami. Sembra che funzioni ma mostra solo 2 fianco a fianco al momento che posso cambiare. Saluti :) –

Questo non funzionerà in IE 8 o meno, non so circa 9, ma dal momento che la vostra utilizzando max-width e min-width che non funzionano neanche lì Lo pubblicherò comunque.

<html> 
<head> 
<title>Testing</title> 
<style> 
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; } 
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center; } 
.box { width: 280px; padding: 10px; margin:8px; height: 260px; border: 0px; background: #fff; display:inline-block;} 

</style> 
</head> 
<body> 

<div id="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <br class="clear" /> 
</div> 

</body> 
</html>

fonte

2010-10-12 10:05:02

Funzionerà in IE8, ma non 7 –

non ha funzionato nel mio IE8 ... –

Si potrebbe utilizzare text-align: center nella confezione e display: inline-block per le scatole per farli comportarsi come normali elementi di testo che sono centrate non importa quale.

Caveat: non funziona in IE6 e IE 7. Lavori in Chrome e FF

JSFiddle here.

fonte

2010-10-12 10:05:45

La soluzione che ha funzionato per me:

<style> 
    body { 
     /* To center the list */ 
     text-align: center; 
    } 

    #wrapper { 
     /* To reset 'text-align' to the default */ 
     text-align: left; 

     display: inline; 
    } 

    .box { 
     display: inline-block; 
    } 
</style>

fonte

2014-07-13 18:50:49 Blackbird

Div multi flottanti centrati in un layout liquido

risposta

Problemi correlati