Comment faire en sorte que plusieurs divs s'affichent sur une ligne tout en conservant la largeur?

Question

Normalement, vous définissez les éléments à afficher: inline si vous souhaitez qu'ils s'affichent sur la même ligne. Cependant, définir un élément sur inline signifie que l'attribut width n'aura aucune signification.

Comment faire des divs pour être dans la même ligne sans les rendre inline?

Answer 1

Vous pouvez utiliser display:inline-block.

Cette propriété permet à un élément du DOM d'avoir tous les attributs d'un élément de type block, mais le garder en ligne. Il y a quelques inconvénients, mais la plupart du temps il est assez bon. Pourquoi c'est bon et pourquoi il ne peut pas travailler pour vous.

EDIT: Le seul moderne navigateur qui a quelques problèmes avec elle, c'est IE7. Voir Quirksmode.org

Answer 2

J'ai utilisé la propriété

 display: table;
 

et

 display: table-cell;
 

Le lien ci-dessous montre 3 tables enveloppées dans des divs et ces divs sont ensuite emballés dans un div parent

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

Voici le jsfiddle: http://jsfiddle.net/vikikamath/QU6WP/1/ Je pensais que cela pourrait être utile à quelqu'un qui cherche à placer les divs dans la même ligne sans utiliser display-inline

Answer 3

Vous pouvez faire flotter vos divs de colonne en utilisant float: left; et leur donner des largeurs.

Et pour vous assurer qu'aucun autre contenu ne soit gâché, vous pouvez envelopper les div flottantes dans une div mère et lui donner un style clair.

J'espère que cela t'aides.