يحب العديد من مصممي الويب وضع حاويتين أو أكثر جنبًا إلى جنب على ارتفاعات متساوية وعرض محتوى كل حاوية بداخلها، تمامًا مثل الخلايا الموجودة في تخطيط الجدول الكلاسيكي الذي يتحكم في مواضع العديد من الأعمدة، كما يحبون أيضًا سهولة استخدام الحاويات. يتم عرض المحتوى في المنتصف أو بمحاذاة أعلى.
لكنك لا تحب استخدام الجداول في تنفيذها، فماذا عليك أن تفعل؟ هناك طرق عديدة لتنفيذه، منها تنفيذه بناءً على الخداع البصري، واستخدام التحكم JS لجعل الارتفاعات متساوية، واستخدام طريقة إخفاء الجزء الفائض من الحاوية والجمع بين الحد السفلي السلبي للعمود والحد الداخلي الموجب التصحيح لحل مشكلة نفس ارتفاع العمود.
في الواقع، هناك طريقة بسيطة يمكن تحقيقها باستخدام العرض:الجدول، والعرض:صف الجدول، والعرض:خلية الجدول، والحاويات ذات الارتفاعات الصغيرة ستتكيف مع تلك ذات الارتفاعات العالية نسبيًا، لكن IE لا يدعمها نحن لا نلوم شركة IE في الوقت الحالي، وأعتقد أنها ستتحسن في المستقبل. هنا قمت بعمل نموذج.
دعونا نلقي نظرة أولاً على بنية xhtml:
| ＜ فئة div = "متساوي" ＞ ＜div فئة = "صف"＞ ＜div class="one"＞＜/div＞ ＜div class="two"＞＜/div＞ ＜div class="ثلاثة"＞＜/div＞ ＜/شعبة＞ ＜/شعبة＞ |
من السهل جدًا فهمه دون شرح، ولكن إليك بنية الجدول، هل هي متشابهة جدًا؟
| <الجدول> ＜tr＞ ＜td＞＜/td＞ ＜td＞＜/td＞ ＜td＞＜/td＞ ＜/tr＞ ＜/الجدول＞ |
هنا هو المغلق:
متساوي { } |
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 بشكل مثالي بعد الاختبار.