مشكلة في محاذاة DIV، 3 Divs نفس الخط أفقيًا

Question

أحاول تحسين مهاراتي في CSS وأواجه بعض المشاكل.أريد محاذاة 3 عناصر DIV في نفس الصف، بدءًا من الجزء العلوي من div الحاوية.لقد تمكنت من محاذاتها أفقيًا، لكنها لا تظهر في الأعلى.يبدو أنهم جميعًا يتماشى مع الجزء السفلي الذي لا أستطيع اكتشافه.هل يمكن لأي شخص أن يوجهني في الاتجاه الصحيح فيما يتعلق بكيفية جعل divs ليس لها هامش و (تطفو؟) إلى الأعلى؟

حاولت إعلان الهوامش لكن لم يحالفني الحظ كثيرًا.سيكون هذا أيضًا في عرض جزئي من خلال MVC لذا فإن تعيين الحاوية على القيمة المطلقة قد لا يكون خيارًا لأن ارتفاعها من أعلى الصفحة سيتغير.

هنا أ JFIDDLE وقمت أيضًا بإرفاق الكود الخاص بي، HTML وCSS، جنبًا إلى جنب مع ما يتم عرضه في المتصفح الخاص بي.

شكرًا!

لغة البرمجة:

<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

يجب أن يكون لديك شيء آخر يحدث هناك، لأنه عندما قمت بتعديل الكمان الخاص بك لجعل العنصر div بارتفاعات مختلفة، فإنه يصطف بالطريقة التي تريدها.يبدو أيضًا أن ما تصفه هو السلوك الافتراضي، لذا لست متأكدًا من سبب رؤيتك جميعًا محاذية للأسفل بهذه الطريقة.هذا هو الجزء الذي قمت بتعديله، وكان هذا فقط لمعرفة كيف يتصرفون:

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

انظر هنا: تحديث كمان