¿Es posible mostrar divs uno al lado del otro sin flotar?

Question

Quiero poner varios div s uno al lado del otro en una fila. Todos los div s tienen la misma altura.

Here es cómo esto se puede hacer usando float: left.

¿Se puede hacer esto sin usar float?

Answer 1

Depende de lo que quieras hacer. Puede utilizar display: inline-block;

http://jsfiddle.net/sygL9/

Answer 2

Puede usar display: inline-block. Pero desafortunadamente algunos navegadores (algunas versiones de IE) no lo admiten.

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

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

Answer 3

un elemento display: block es (efectivamente) va a tener un salto de línea al final. Una opción que le permitirá mantener estilos de elementos de bloque, mientras que ponerla en el pageflow se establece display: inline-block (por supuesto, con some additional work de conseguir esto es comportarse)

Otra opción es nido de ellos, todo listo para position: relative, y el uso la regla left para alinearlos.

Answer 4

Si usted tiene la posibilidad de cambiar los divs a lapso elementos, que sería solucionar el problema sin necesidad de utilizar 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>

Aquí está, con siete divisiones en una fila