È possibile visualizzare i div uno vicino all'altro senza fluttuare?

Question

Voglio mettere più div s l'uno accanto all'altro in una riga. Tutti gli div hanno la stessa altezza.

Here è come ciò può essere fatto utilizzando float: left.

È possibile eseguire questa operazione senza utilizzare float?

Answer 1

dipende da ciò che si vuole fare. È possibile utilizzare display: inline-block;

http://jsfiddle.net/sygL9/

Answer 2

È possibile utilizzare la visualizzazione: blocco in linea. Ma sfortunatamente alcuni browser (alcune versioni di IE) non lo supportano.

http://www.brunildo.org/test/inline-block.html

http://www.quirksmode.org/css/display.html

Answer 3

un elemento display: block è (efficace) sta per avere un'interruzione riga alla fine. Una possibilità che vi permetterà di mantenere gli stili elemento di blocco, mentre mettendolo nel pageflow è impostata display: inline-block (naturalmente, con some additional work per ottenere cioè comportarsi)

Un'altra opzione è quella di nido loro, tutto pronto per position: relative, e l'uso la regola left per allinearli.

Answer 4

Se avete la possibilità di modificare i div per arco elementi, che sarebbe risolvere il problema senza usare i CSS

<span></span><span></span><span></span><span></span> 

Answer 5

#together { 
 
    position: absolute; 
 
    display: inline-block; 
 
\t margin;left:10px; 
 
\t background-color:lightblue; 
 
\t width:500px; 
 
\t border:4px double blue; 
 
}

<div id="together" style="left:10px">first div</div> 
 
<div id="together" style="left:520px">second div</div> 
 
<div id="together" style="left:1030px">third div</div> 
 
<div id="together" style="left:1540px">fourth div</div> 
 
<div id="together" style="left:2050px">fifth div</div> 
 
<div id="together" style="left:2560px">sixth div</div> 
 
<div id="together" style="left:3070px">seventh div</div>

Eccovi qui, con sette div in fila