div alignmentの問題、3 divは同じ線を水平に

Question

私は自分のCSSスキルを向上させようとしており、いくつかの問題を抱えています。コンテナdivの上部から始めて、同じ行に3つのdivを調整したいと思います。私はそれらを水平に整列させることができましたが、それらは上部に表示されていません。それらはすべて、私が理解できない底に合わせているようです。誰かが私を正しい方向に向けて、Divにマージンを持たず（フロート？）トップに（フロート？）をさせることができますか？

私はマージンを宣言しようとしましたが、それほど運はありませんでした。また、これは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

それはあなたのチェックボックスのためです。 3つのコンテンツ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;
}

ここを参照してください： フィドルを更新しました