分隔对齐的问题，水平3次同一行

Question

我正在尝试提高我的CSS技能，并遇到一些麻烦。我想在同一行上对齐3个divs，从容器div的顶部开始。我能够使它们水平对齐，但它们没有显示在顶部。看来他们都与我不知道的底部保持一致。有人可以指向我如何使Divs没有边距和（浮动？）的正确方向？

我尝试宣布利润率，但没有太多运气。同样，这将通过MVC进行部分视图，因此将容器设置为绝对可能不是一个选项，因为它从页面顶部的高度将更改。

这里有一个 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

它是因为您的复选框。只需将它们放在三个内容divs之后即可。

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

看这里： 更新的小提琴