¿Cómo hacer que múltiples divs se muestren en una línea pero que aún conserven el ancho?

Question

Normalmente, configura elementos para mostrar: en línea si desea que se muestren en la misma línea. Sin embargo, establecer un elemento en línea significa que el atributo de ancho no tendría sentido.

¿Cómo se hace que los divs estén en la misma línea sin hacerlos en línea?

Answer 1

Puede usar display:inline-block.

Esta propiedad permite que un elemento DOM tenga todos los atributos de un elemento de bloque, pero manteniéndolo en línea. Hay algunos inconvenientes, pero la mayoría de las veces es lo suficientemente bueno. Why it's good and why it may not work for you.

EDIT: La única moderno navegador que tiene algunos problemas con él es IE7. Ver Quirksmode.org

Answer 2

Puede flotar sus divisiones de columna usando float: izquierda; y darles anchos.

Y para asegurarte de que ninguno de tus otros contenidos se arruine, puedes envolver los divs flotantes dentro de un div principal y darle un estilo de flotación claro.

Espero que esto ayude.

Answer 3

utilicé la propiedad

display: table; 

y

display: table-cell; 

para lograr el same.Link a tocar el violín a continuación muestra 3 mesas envueltas en divs y estos divs se envuelven más en un div padre

<div id='content'> 
    <div id='div-1'><!-- COntains table --></div> 
    <div id='div-2'><!-- contains two more divs that require to be arranged one below other --></div> 
</div> 

Aquí está el jsfiddle: http://jsfiddle.net/vikikamath/QU6WP/1/ Pensé thi s puede ser útil para alguien que busca establecer divisores en la misma línea sin usar display-inline