Проблема с выравниванием div, 3 Divs по той же линии горизонтально

Question

Я пытаюсь улучшить свои навыки CSS, и у меня есть некоторые проблемы. Я хочу выравнивать 3 DOV в том же ряду, начиная с верхней части контейнера Div. Я смог выровнять их по горизонтали, но они не отображаются наверху. Кажется, они все выровняются с дном, которое я не могу понять. Может ли кто -нибудь указать мне правильное направление относительно того, как заставить Divs нет края и (плавает?) На вершине?

Я попытался объявить поля, но не повезло. Кроме того, это будет в частичном представлении через MVC, поэтому установка контейнера на Absolute может не быть вариантом, потому что его высота с верхней части страницы будет изменяться.

Вот Jfiddle И я также приложил свой код, как HTML, так и CSS, а также то, что отображается в моем браузере.

Спасибо!

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

Ниже приведено то, что отображается:

Answer 1

Это из -за ваших флажков. Просто поместите их после трех контент DIV.

<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

У вас должно быть что -то еще, потому что, когда я модифицировал вашу скрипку, чтобы сделать предмет различных высот, они выстроили в очередь так, как вы, кажется, хотите. То, что вы описываете, также звучит как поведение по умолчанию, поэтому я не уверен, почему вы увидите, как все они выровнены на дне. Вот тот, который я изменил, это было просто для того, чтобы увидеть, как они вели себя:

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

Глянь сюда: Обновленная скрипка