Problème avec l'alignement DIV, 3 Divs Même ligne horizontalement

Question

J'essaie d'améliorer mes compétences CSS et j'ai des problèmes. Je veux aligner 3 divs sur la même ligne, en commençant en haut du div de conteneur. J'ai pu les aligner horizontalement, mais ils ne s'affichent pas en haut. Il semble qu'ils s'alignent tous sur le fond que je ne peux pas comprendre. Quelqu'un peut-il me pointer dans la bonne direction sur la façon de faire que les divs n'ont pas de marge et (flottent?) Au sommet?

J'ai essayé de déclarer les marges mais je n'ai pas eu beaucoup de chance. En outre, cela va être dans une vue partielle via MVC, donc le réglage du conteneur sur Absolute peut ne pas être une option car sa hauteur en haut de la page changera.

Voici une Jfiddle Et j'ai également joint mon code, HTML et CSS, ainsi que ce qui est rendu dans mon navigateur.

Merci!

HTML:

<fieldset>
<legend>Items</legend>
 <div class="outercontainer" id="top">
    <div class="containera">
      <div class="group-title">
        <input type="checkbox" runat="server" />
      </div>
        <div class="left item">Left Content</div>
        <div class="center item">Center Content</div>
        <div class="right item">Right Content</div>
    </div>
</div>
<div class="outercontainer" id="bottom">
  <div class="containera">
      <div class="group-title">
        <input type="checkbox" runat="server" />
      </div>
      <div class="left item">Left Content</div>
      <div class="center item">Center Content</div>
      <div class="right item">Right Content</div>
  </div>
</div>
</fieldset>

CSS:

#top {
    border: 3px solid green;
}
#bottom {
    border: 3px solid blue;
}
.item {
    position:relative;
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin:0;
    top:0;
    width: 32%;
    color: white;
}
.left {
    background:red;
}
.right {
    background:blue;
}
.center {
    background:green;
}
    .containera {
    text-align: center;
    white-space: nowrap;
}
    .group-title {
    text-align:center;
    font-weight:bold;
    font-size:larger;
}
.group-title2 {
text-align:center;
width:100%;
}

Vous trouverez ci-dessous ce qui est rendu:

Answer 1

C'est à cause de vos cases à cocher. Mettez-les simplement après les trois divs de contenu.

<div class="containera">

    <div class="left item">Left Content</div>
    <div class="center item">Center Content</div>
    <div class="right item">Right Content</div>
    <div class="group-title">
        <input type="checkbox" runat="server" />
    </div>
</div>

Answer 2

Vous devez avoir quelque chose d'autre qui se passe là-bas, car lorsque j'ai modifié votre violon pour faire de l'élément des divismes différentes, ils ont aligné comme vous semblez le vouloir. Ce que vous décrivez ressemble également au comportement par défaut, donc je ne sais pas pourquoi vous les verriez tous alignés sur le bas comme ça. Voici le bit que j'ai modifié, c'était juste pour voir comment ils se comportaient:

.left {
    background:red; height:50px;
}
.right {
    background:blue; height:70px;
}
.center {
    background:green; height: 30px;
}

Vois ici: Violon mis à jour