فيما يلي ما قمت بترجمته، وهي ترجمة مجانية بناءً على فهمي للمقالة. من فضلك لا تجد أي خطأ في الترجمة. هدفي هو نقل مهارة CSS هذه فقط.
يحب العديد من مصممي الويب وضع حاويتين أو أكثر جنبًا إلى جنب على ارتفاعات متساوية وعرض محتوى كل حاوية بداخلها، تمامًا مثل الخلايا الموجودة في تخطيط الجدول الكلاسيكي الذي يتحكم في مواضع العديد من الأعمدة، كما يحبون أيضًا سهولة استخدام الحاويات. يتم عرض المحتوى في المنتصف أو بمحاذاة أعلى.
لكنك لا تحب استخدام الجداول في تنفيذها، فماذا عليك أن تفعل؟ هناك طرق عديدة لتنفيذه، منها تنفيذه بناءً على الخداع البصري، واستخدام التحكم JS لجعل الارتفاعات متساوية، واستخدام طريقة إخفاء الجزء الفائض من الحاوية والجمع بين الحد السفلي السلبي للعمود والحد الداخلي الموجب التصحيح لحل مشكلة نفس ارتفاع العمود.
في الواقع، هناك طريقة بسيطة يمكن تحقيقها باستخدام العرض:الجدول، والعرض:صف الجدول، والعرض:خلية الجدول، والحاويات ذات الارتفاعات الصغيرة ستتكيف مع تلك ذات الارتفاعات العالية نسبيًا، لكن IE لا يدعمها نحن لا نلوم شركة IE في الوقت الحالي، وأعتقد أنها ستتحسن في المستقبل. هنا قمت بعمل نموذج.
نظرة أولى على بنية xhtml:
<فئة div = متساوية>
<فئة القسم = الصف>
<div class=one></div>
<div class=two></div>
<div class=three></div>
</div>
</div>
من السهل جدًا فهمه دون شرح، ولكن إليك بنية الجدول، هل هي متشابهة جدًا؟
<الجدول>
<تر>
<td></td>
<td></td>
<td></td>
</tr>
</الجدول>
هنا هو المغلق:
.متساوي {
عرض:الجدول؛
انهيار الحدود: منفصل؛
}
.صف {
العرض: صف الجدول؛
}
.صف شعبة {
العرض: خلية الجدول؛
}
.صف .واحد {
العرض: 200 بكسل؛
}
.صف .اثنين {
العرض: 200 بكسل؛
}
.صف .ثلاثة {
}
يشرح:1.dispaly:table; دع الطبقة تُعرض كجدول لعناصر مستوى الكتلة، أي تعامل معها كجدول
2.border-collapse:separate; الحدود مستقلة، تمامًا كما كانت قبل دمج الخلايا في الجدول.
3.display:table-row؛ يعرض الصف كصف جدول tr
4.display:table-cell؛ يعرض القسم الثانوي للصف كخلية جدول td
5. ثم حدد العرض
يتم استخدام Border-spacing:10px; هنا أيضًا للتمييز بين عدة مربعات، كما هو مذكور أعلاه، لا يمكن عرضه بشكل طبيعي ضمن IE، ولكنه: Mozilla 1.6، Opera 7.50، Safari 1.2.2، Firefox 0.8، OmniWeb 5b، Camino 0.8. b، ويمكن عرض Netscape 7.1 بشكل مثالي بعد الاختبار.