Comment aligner des travées ou des divs horizontalement?

Question

Mon seul problème est de les aligner sur trois rangs et d’avoir un espacement égal. Apparemment, les étendues ne peuvent pas avoir de largeur et les divs (et les étendues avec display: block) n'apparaissent pas horizontalement les uns à côté des autres. Suggestions?

<div style='width:30%; text-align:center; float:left; clear:both;'> est ce que j'ai maintenant.

Answer 1

Vous pouvez utiliser des divs avec l'attribut float: left; qui les fera apparaître horizontalement l'un à côté de l'autre, mais vous devrez peut-être alors utiliser l'effacement des éléments suivants pour vous assurer qu'ils ne se chevauchent pas.

Answer 2

Vous pouvez utiliser

 .floatybox {
     display: inline-block;
     width: 123px;
}
 

Si vous devez uniquement prendre en charge les navigateurs prenant en charge les blocs en ligne. Les blocs en ligne peuvent avoir une largeur, mais ils sont en ligne, comme les éléments de bouton.

Oh, et vous voudrez peut-être ajouter vertical-align: en haut des éléments pour vous assurer que tout se passe bien

Answer 3

Ma réponse:

<style>
 #whatever div {
  display: inline;
  margin: 0 1em 0 1em;
  width: 30%;
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

Pourquoi?

Techniquement, un Span est un élément inline, mais il peut avoir la largeur, vous avez juste besoin de mettre leur propriété d'affichage à bloc en premier. Cependant, dans ce contexte, une div est probablement plus approprié, comme j'imagine que vous voulez remplir ces divs avec le contenu.

Une chose que vous ne voulez certainement pas à faire est de clear:both ensemble sur les divs. Le réglage de ce que cela signifie que le navigateur ne permet pas tous les éléments pour s'asseoir sur la même ligne qu'eux. Le résultat, vos éléments de la pile.

Notez que l'utilisation de l' display:inline. Il traite de la ie6 marge du doublage de bug. Vous pourriez aborder cela dans d'autres façons, si nécessaire, par exemple conditionnelle feuilles de style.

J'ai ajouté un wrapper (#quoi que ce soit) que je devine ces ne seront pas les seuls éléments sur la page, de sorte que vous aurez presque certainement besoin de les séparer des autres éléments de la page.

De toute façon, j'espère que c'est utile.

Answer 4

tu peux faire:

 <div style="float: left;"></div>
 

ou

 <div style="display: inline;"></div>
 

L'un ou l'autre fera en sorte que les divs soient tuilées horizontalement.

Answer 5

Ce que vous pourriez faire est de regarder CSS grille en fonction des modèles. Cette méthode de présentation implique de spécifier certaines classes CSS pour aligner le contenu de la page à une structure de grille. C'est plus étroitement liée à l'impression bsed mise en page que sur le web, mais c'est une technique utilisée sur beaucoup de sites web à disposition le contenu dans une structure sans avoir à recourir à des tables.

Essayez ceci pour des démarreurs de Smashing Magazine.