Come rendere più div in una riga ma mantenere la larghezza?

Question

Normalmente, si impostano gli elementi da visualizzare: in linea se si desidera che vengano visualizzati nella stessa riga. Tuttavia, l'impostazione di un elemento su inline significa che l'attributo width non avrebbe senso.

Come si fanno divs nella stessa linea senza renderli in linea?

Answer 1

È possibile utilizzare display:inline-block.

Questa proprietà consente a un elemento DOM di avere tutti gli attributi di un elemento di blocco, ma di mantenerlo in linea. Ci sono alcuni inconvenienti, ma il più delle volte è abbastanza buono. Why it's good and why it may not work for you.

EDIT: L'unica moderna browser ha qualche problema con esso è IE7. Vedi Quirksmode.org

Answer 2

Puoi fluttuare i tuoi div di colonna usando float: a sinistra; e dargli delle larghezze

E per assicurarti che nessuno degli altri tuoi contenuti venga incasinato, puoi dividere i div flottati in un div padre e dargli un po 'di stile float chiaro.

Spero che questo aiuti.

Answer 3

ho usato la proprietà

display: table; 

e

display: table-cell; 

per raggiungere il same.Link per giocherellare seguente mostra 3 tavoli avvolti in div e div questi sono ulteriormente avvolto in un div genitore

<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> 

Ecco il jsfiddle: http://jsfiddle.net/vikikamath/QU6WP/1/ Ho pensato che s potrebbe essere utile a qualcuno che cerchi di impostare div sulla stessa riga senza usare display-in-