div 정렬 문제, 3 개의 divs 동일한 선이 수평으로

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

확인란 때문입니다. 세 컨텐츠 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;
}

여기를 봐: 업데이트 된 바이올린