Comment aligner les travées ou divs horizontalement?

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

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

Vous pouvez utiliser des div avec l' float: left;attribut qui les fera apparaître horizontalement les uns à côté des autres, mais vous devrez peut-être utiliser la compensation sur les éléments suivants pour vous assurer qu'ils ne se chevauchent pas.

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 sont en ligne, comme les éléments de bouton.

Oh, et vous pourriez vouloir ajouter vertical-align: top sur les éléments pour vous assurer que les choses s'alignent

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 en ligne, mais il peut avoir une largeur, il vous suffit de définir sa propriété d'affichage sur bloquer en premier. Cependant, dans ce contexte, un div est probablement plus approprié, car je suppose que vous voulez remplir ces div avec du contenu.

Une chose que vous ne voulez certainement pas faire est de clear:bothdéfinir les divs. Le paramétrer ainsi signifiera que le navigateur ne permettra à aucun élément de s'asseoir sur la même ligne qu'eux. Le résultat, vos éléments s'empileront.

Notez, l'utilisation de display:inline. Cela traite du bogue de doublage de marge ie6. Vous pouvez résoudre ce problème de différentes manières si nécessaire, par exemple des feuilles de style conditionnelles.

J'ai ajouté un wrapper (#whatever) car je suppose que ce ne seront pas les seuls éléments de la page, vous devrez donc certainement les séparer des autres éléments de la page.

Quoi qu'il en soit, j'espère que cela vous sera utile.

tu peux faire:

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

ou

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

L'un ou l'autre entraînera la mosaïque horizontale des div.

Je ferais quelque chose comme ça car cela vous donne 3 colonnes de même taille, même espacement et (même) échelles. Remarque: cela n'a pas été testé et peut donc nécessiter des ajustements pour les navigateurs plus anciens.

<style>
html, body {
    margin: 0;
    padding: 0;
}

.content {
    float: left;
    width: 30%;
    border:none;
}

.rightcontent {
    float: right;
    width: 30%;
    border:none
}

.hspacer {
    width:5%;
    float:left;
}

.clear {
    clear:both;
}
</style>

<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>

J'utiliserais:

<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%; 
}
.sidebox { 
float: right;
width: 30%; 
}
<div class="all">
   <div class="maincontent">
       MainContent
   </div>
   <div class="sidebox"> 
       SideboxContent
   </div>
</div>

C'est la première fois que j'utilise cet `` outil de code '' par débordement ... mais je dois le faire maintenant ...

Ce que vous voudrez peut-être faire, c'est rechercher des mises en page basées sur une grille CSS. Cette méthode de mise en page implique la spécification de certaines classes CSS pour aligner le contenu de la page sur une structure de grille. Elle est plus étroitement liée à la mise en page imprimée qu'à la mise en page Web, mais c'est une technique utilisée sur de nombreux sites Web pour mettre en page le contenu dans une structure sans avoir à recourir à des tableaux.

Essayez ceci pour les débutants de Smashing Magazine.

Regardez la propriété css Float. http://w3schools.com/css/pr_class_float.asp

Cela fonctionne avec des éléments de bloc comme div. Sinon, qu'est-ce que vous essayez d'afficher, les tableaux ne sont pas mauvais si vous essayez vraiment d'afficher un tableau contenant certaines informations.

J'essaierais de leur donner tous les display: block;attributs et l'utilisation float: left;.

Vous pouvez ensuite définir widthet / ou heightcomme vous le souhaitez. Vous pouvez même spécifier certaines règles d'alignement vertical.

    <!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>

un autre ... essayez d'utiliser float: left;ou right;, changez le widthpour d'autres valeurs ... ça devrait marcher ... notez également que les 10% qui ne sont pas utilisés par la div sont entre eux ... désolé pour le mauvais anglais :)