Problem z wyrównaniem DIV, 3 DIV w tej samej linii w poziomie - css, google-chrome, Internet-explorer-7

Próbuję poprawić swoje umiejętności CSS i jestemmieć jakieś kłopoty. Chcę wyrównać 3 DIVy w tym samym wierszu, zaczynając od początku div div. Udało mi się ustawić je poziomo, ale nie są wyświetlane na górze. Wygląda na to, że wszystkie są zgodne z dnem, którego nie mogę zrozumieć. Czy ktoś może wskazać mi właściwy kierunek, w jaki sposób sprawić, by div nie miały żadnego marginesu i (float?) Do góry?

Próbowałem deklarować marginesy, ale nie miałemdużo szczęścia. Będzie to także częściowo widoczne przez MVC, więc ustawienie kontenera na absolutne może nie być opcją, ponieważ jego wysokość od góry strony będzie się zmieniać.

Tutaj jest JFIDDLE dołączyłem też mój kod, zarówno HTML, jak i CSS, wraz z tym, co jest renderowane w mojej przeglądarce.

Dzięki!

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

Poniżej znajduje się to, co jest renderowane:

Odpowiedzi:

to z powodu twoich pól wyboru. Po prostu umieść je po trzech divach zawartości.

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

Musisz tam mieć coś innego,ponieważ kiedy zmodyfikowałem twoje skrzypce, aby element podzielił różne wysokości, ustawili się tak, jak chcesz. To, co opisujesz, również brzmi jak zachowanie domyślne, więc nie jestem pewien, dlaczego widzisz je wszystkie wyrównane do dna w ten sposób. Oto bit, który zmodyfikowałem, żeby zobaczyć, jak się zachowują:

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

Spójrz tutaj: Zaktualizowano skrzypce