لقد أثارتني التصاميم الأفقية من كل الأنواع منذ أن اكتشفت أنك تستطيع القيام بذلك. أنا لا أعرف بالضبط لماذا أنا مفتونة معهم ... ربما هو مجرد متمردي الداخلي يتحدث. مهما كان السبب ، فأنا على وشك الإعلان عن التمرير الرأسي البالي ، و passé ، والألفية الأخيرة.

حسنا ، هذا ليس حقا ما أعنيه. ومع ذلك ، مع الزيادة المفاجئة في عدد الشاشات التي تعمل باللمس حول الكذب ، يصبح من الصعب تأكيد أن "أعلى وأسفل" هي أفضل خياراتنا. أصبحت "اليمين واليسار" اتجاهات قابلة للتطبيق لوضع المحتوى ، طالما أنك لا تتعامل مع مجلدات كبيرة من النص.

أنا لم ازعجت حقا لبناء أي تخطيطات الأفقي ، وإن كان. يبدو أن المشاكل التقنية والقيود تفوق دائما أي فوائد أسلوبية أو ملاحية قد تكون موجودة. كان ذلك من قبل ، ومع ذلك ؛ وهذا الآن ...

جئت عبر التقنية الموضحة في هذا المقال بالطريقة التي عادة ما أجد بها الأشياء: من خلال محاولة القيام بشيء آخر تمامًا. كنت أحاول (يمكنك الضحك) لإنشاء إطار الشبكة CSS على أساس العرض: خلية الجدول (حسنا ، توقف عن الضحك الآن).

حسنا ، لأسباب تبدو واضحة الآن ، لم تنجح. تحاول إنشاء شبكة صور متجاوب مع خاصية خلية الجدول. المضي قدما ، سأنتظر.

ببساطة ، يتم تصميم خلايا الجدول لتشكيل صف واحد أفقي. (قلت توقف عن الضحك!) هذا ما يفعلونه ، وأنهم لا يحبون ذلك عند محاولة جعلها تفعل أي شيء آخر. لقد تخليت عن هذا المشروع. بعد بضعة أسابيع ، كنت أفكر في إعادة تصميم محفظتي مرة أخرى.

اعتقدت أنه سيكون من الجيد وضع كل مشاريعي على صفحة واحدة. نظرت في العديد من الحلول التنظيمية لعرض مشاريع الويب والكتابة والتصوير الفوتوغرافي ، وخرجت بهذا: أريد عرض هذه الفئات الثلاثة كصفوف من الصور المصغرة التمرير الأفقي.

هذا عندما ضربني: "خلايا الجدول ستكون مثالية لذلك. أيضا ، يمكنك مركز الأشياء رأسيا داخلها! أنا ذكي جدا يؤلم! "[بعض الدرامية هنا.]

لم أقم بإعادة تصميم موقعي بعد ، بدلاً من ذلك ، قمت بترميز المثالين للتقنية الموجودة في ملف .zip المرتبط في أسفل هذه المقالة.

مما يجعلها تعمل

لذلك ، لتعطيك المرئية ، وهنا التجريبي لقد عملت.

في ما يلي كيفية ترميز كل صف:

Project Title

من هناك ، تعد CSS اللازمة لتشغيلها بسيطة بما يكفي:

// This container element gives us the scrollbars we want.div.horizontal {width: 100%;height: 400px;overflow: auto;}// table-layout: fixed does a lot of the magic, here. It makes sure that the "table cells" retain the pixel dimensions you want..table {display: table;table-layout: fixed;width: 100%;}// Arranging your content inside the "cells" is as simple as using the vertical-align and text-align properties. Floats work, too.article {width: 400px;height: 400px;display: table-cell;background: #e3e3e3;vertical-align: middle;text-align: center;}// Some styling for contrast.article:nth-child(2n+2){background: #d1d1d1;}

تتطلب بعض تقنيات التخطيط الأفقي لعنصر الحاوية ( div.horizontal ، في هذه الحالة) أن يكون عرض البكسل المحدد مساوياً للعرض المجمع للعناصر التي يحتوي عليها. تتطلب التقنيات الأخرى عرض: مضمنة - block؛ أنا لست من المعجبين بهذه التقنية. باستخدام خلية الجدول ، استمر في إضافة عناصر وقتما تشاء ، وكنت على ما يرام ، فهي مثالية للاستخدام مع نظام إدارة المحتوى.

مما يجعلها ملء الشاشة

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

وهنا عرض العمل.

الترميز مشابه:

Full-Screen Horizontal Layouts
Made with display: table-cell;
  بقلم إزيكويل بروني 

هنا ، ومع ذلك ، فإنه مجرد "صف" واحد تم تصميمه ليناسب حجم نافذة المتصفح. كل

// Don't touch this part. It helps.html, body {width: 100%;height: 100%;overflow: hidden;}// In this case, I didn't want a scrollbar, so I used overflow: hidden. The container element is more essential than ever, though. The body element will not do.div.horizontal {display: block;width: 100%;height: 100%;overflow: hidden;position: static;}.table {display: table;table-layout: fixed;width: 100%;height: 100%;}.table > section {width: 1600px; // The width is based on my monitor. It's replaced by jQuery anyway. Percentage widths do not work.height: 100%;display: table-cell;background: #e3e3e3;vertical-align: middle;text-align: center;}

$(window).load(function() {var vWidth = $(window).width();var vHeight = $(window).height();$('.table > section').css('width', vWidth).css('height', vHeight);});$(window).resize(function() {var vWidth = $(window).width();var vHeight = $(window).height();$('.table > section').css('width', vWidth).css('height', vHeight);});