Problem mit der Divy -Ausrichtung, 3 Divs gleiche Linie horizontal

Question

Ich versuche, meine CSS -Fähigkeiten zu verbessern und habe einige Probleme. Ich möchte 3 Divs in derselben Reihe ausrichten, beginnend oben auf dem Container -Div. Ich konnte sie horizontal ausrichten lassen, aber sie zeigen nicht oben. Es scheint, dass sie alle mit dem Boden ausgerichtet sind, den ich nicht herausfinden kann. Kann mich jemand in die richtige Richtung verweisen, wie die Divs keinen Rand haben und (schweben?) Nach oben?

Ich habe versucht, die Margen zu erklären, hatte aber nicht viel Glück. Außerdem wird dies in einer Teilansicht über MVC sein. Das Einstellen des Containers auf absolute ist möglicherweise keine Option, da sich die Höhe von oben auf der Seite ändert.

Hier ist ein Jfiddle Und ich habe auch meinen Code angehängt, sowohl HTML als auch CSS, zusammen mit dem, was in meinem Browser gerendert wird.

Vielen Dank!

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%;
}

Unten ist das, was gerendert wird:

Answer 1

Es ist wegen Ihrer Kontrollkästchen. Setzen Sie sie einfach nach den drei Inhaltsdiven.

<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

Sie müssen dort etwas anderes haben, denn als ich Ihre Geige geändert habe, um die Divs unterschiedliche Höhen zu machen, stellten sie sich so aus, wie Sie es zu wollen scheinen. Was Sie beschreiben, klingt auch nach dem Standardverhalten, daher bin ich mir nicht sicher, warum Sie sie alle so auf dem Boden ausrichten sehen würden. Hier ist das Stück, das ich geändert habe. Dies war nur um zu sehen, wie sie sich verhalten haben:

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

Siehe hier: Geigen aktualisiert