متعدد الأعمدة CSS بمزيد من التفاصيل. نص متعدد الأعمدة

مثال 1: عرض العمود بالبكسل

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

يمكن استبدال سمات العرض والمحاذاة بخصائص نمط العرض والمحاذاة الرأسية بنفس القيم. ثم سيبدو هذا الرمز بهذا الشكل (المثال 2).

مثال 2: استخدام الأنماط

الهوامش داخل الأعمدة

يتم التحكم في المسافة بين الأعمدة بواسطة سمة cellpadding الخاصة بالعلامة

مثال 3: استخدام الحقول

في هذا المثال، تكون قيم سمات cellpacing وcellpadding صفرًا، ويتم تحديد التباعد بين محتويات الأعمدة بواسطة خاصية padding-right، والتي تتم إضافتها إلى الخلية اليسرى من خلال معرف يسمى leftcol .

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

مثال 4. الهوامش في الخلايا

لون خلفية العمود

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

مثال 5: لون الخلفية

في هذا المثال، تمت إضافة ألوان خلفية مختلفة للأعمدة اليمنى واليسرى (الشكل 1).

أرز. 1. أعمدة بألوان مختلفة

فاصل العمود

إن استخدام الهوامش ليس مناسبًا دائمًا لتعيين المسافة المطلوبة بين الأعمدة. على سبيل المثال، في حالة عدم إمكانية تضمين الحقول المحيطة بالنص لأسباب مختلفة. ومن ثم فإن إضافة خلية أخرى سيساعد، والتي تعمل كفاصل بين الأعمدة (المثال 6).

مثال 6: استخدام ثلاث خلايا

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

في التين. ويبين الشكل 2 نتيجة المثال. وللوضوح والجمال، تم إضافة حدود حول الأعمدة.

الخط بين الأعمدة

يمكنك فصل الأعمدة ليس فقط باستخدام لون الخلفية والمسافة البيضاء، ولكن أيضًا عن طريق إضافة خط بين الأعمدة. مرة أخرى، الأنماط مفيدة هنا لأنها تجعل إنشاء الخطوط أسهل بكثير. تحتاج فقط إلى تعيين خاصية border-left للعمود الأيمن أو خاصية border-right للعمود الأيسر (المثال 7).

مثال 7: إضافة سطر

وتظهر نتيجة هذا المثال أدناه.

ملخص

يعد إنشاء الأعمدة باستخدام الجداول عملية بسيطة وسريعة إلى حد ما؛ كل ما عليك فعله هو إضافة جدول يحتوي على خليتين وتحديد سماته المرئية. بالإضافة إلى ذلك، يمكن وضع معظم المعلمات التي تحدد نوع الجدول في الأنماط وبالتالي تسريع عملية إضافة الجداول من نفس النوع والمستندات بناءً عليها.

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

اليوم سنلقي نظرة على عنصر تخطيط سريع الاستجابة وبسيط للغاية، مثل النص المكون من عمودين. بعد أن فهمت المعنى، يمكنك إنشاء ثلاثة وأربعة أعمدة، والتي عند الوصول إلى الحد الأدنى المحدد للعرض، تنخفض. وبطبيعة الحال، يمكنك إضافة صور إلى النص، وأي عناصر تصميم على الإطلاق.
وبطبيعة الحال، لا يمكنك إضافة نص فحسب، بل يمكنك أيضًا إضافة أي محتوى آخر إلى الأعمدة أو الأعمدة. يُطلق على هذا التخطيط التكيفي للكتل أيضًا اسم "العائم". لأن الذي؟ واصل القراءة وسوف تفهم كل شيء.
تمتد الأمثلة النصية التالية المكونة من عمودين عبر العرض الكامل للحاوية. في حالتي، هذه منطقة محتوى نموذجية في مدونات WordPress.

نص من عمودين من محرر WordPress

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

تخطيط التكيف. نص عمودين بدون صور

يمكنك إضافة زر إلى المحرر

لكي لا يتم إدخال رمز النص في عمودين يدويًا في كل مرة، يمكنك القيام بذلك مرة واحدة، دون استخدام مكون إضافي. أنها مريحة للغاية.

حسنًا، دعونا نلقي نظرة على كود بسيط جدًا للتخطيط التكيفي لعمودين.
هنا أحضر نص HTML المصدر في عمودين:

div class = "left-col" - العمود الأيسر مع class.left-col

div class = "right-col" - العمود الأيمن مع class.right-col

div class = "clearfix" عبارة عن كتلة خاصة لإلغاء التعويم. انظر أدناه.

كود CSS لتخطيط النص التكيفي في عمودين:

عمود يسار، /* العمود الأيسر */ .right-col/* العمود الأيمن */ ( width: 50%; /* width */ min-width: 180px; /* الحد الأدنى للعرض التضييقي */ height: auto; /* الارتفاع */ حجم الصندوق: مربع الحدود؛ تعويم: يسار؛ /* المسافة البادئة اليسرى */ )
/*أنماط للشاشات الصغيرة*/ @media (max-width: 479px)( .left-col, /* left column */ .right-col/* right column */ ( width: 100%; /* width */ ) .right-col( padding-left: 0px; /* الحشو الأيسر */ ) ) /* Clearfix يعيد تعيين float*/ .clearfix:after ( content: " "؛ العرض: block؛ واضح: كلاهما؛ الرؤية: مخفي؛ السطر -الارتفاع: 0;

العمود الأيسر و العمود الأيمن العرض غير ثابت، ولكن كنسبة مئوية - العرض: 50%؛ نسبي بحيث يتم تمديد الأعمدة بالنسبة لعرض الحاوية.

ولكن، عند الوصول إلى 180 بكسل، لم يعد يتم تصغير كل عمود.
الحد الأدنى للعرض: 180 بكسل؛ - تم تحديد الحد الأدنى لحجم العمود.

وبطبيعة الحال، يمكن تغيير هذه الأحجام حسب تقديرك. ثلاثة أعمدة، لذلك قم بتعيين العرض: 33.3333%؛ .

الارتفاع: تلقائي؛ - ارتفاع الأعمدة التكيفية، يتغير تلقائيًا حسب حجم المحتوى في الأعمدة.

تحجيم الصندوق: صندوق الحدود؛ - يُنصح بتسجيله للتخطيط التكيفي. خاصية تتناسب فيها جميع الحشوات والحدود وما إلى ذلك مع حجم الحاوية المحدد. في حالتنا، .left-col و .right-col .

تعويم: اليسار؛ - خاصية يتم فيها ترتيب الأعمدة التي تحتوي على نص أفقيًا بالتناوب. يعتمد عدد الأعمدة على الأحجام النسبية المحددة مسبقًا. لدينا العرض: 50%؛ - عمودين.

@media (أقصى عرض: 479 بكسل) - ما يسمى بنقطة التوقف. وهذا يعني أنه على الشاشات الأصغر من 479 بكسل، سيمتد كل عمود عبر عرض الشاشة بالكامل. ينص الكود على:

العمود الأيسر والعمود الأيمن (العرض: 100%؛)

نقاط التوقف

باستخدام نقاط التوقف، يمكنك التحكم بسهولة في حجم العناصر لشاشات مختلفة.

@media(الحد الأقصى للعرض: 479px)() @media(الحد الأقصى للعرض: 767px)() @media(الحد الأقصى للعرض: 991px)() @media(الحد الأقصى للعرض: 1199px)() @media(min-width : 480 بكسل) ( ) @media (العرض الأدنى: 768 بكسل) ( ) @media (العرض الأدنى: 992 بكسل) ( ) @media (العرض الأدنى: 1200 بكسل) ( )

صعب؟ فقط للوهلة الأولى. قم بتنزيل المصدر وقم بتغيير المعلمات، وانظر إلى المنطق. أو قم فقط بنسخ الكود المصدري واستبدال النص بالكود الخاص بك.

تخطيط التكيف. نص من عمودين مع الصور

وبطبيعة الحال، يمكنك إضافة أي عناصر إلى الأعمدة التكيفية. دعونا نلقي نظرة على مثال لإضافة الصور إلى الأعمدة التكيفية مع النص.

أولاً، دعونا نجعل الصور نفسها قابلة للتكيف. للقيام بذلك، قم بتعيين فئة لهم وضبط العرض على 100%.
أنماط CSS للصور سريعة الاستجابة

/*أنماط الصور المستجيبة*/ .img-response(display: block; max-width: 100%; /* العرض، الأبعاد بالنسب المئوية*/ الارتفاع: تلقائي; الهامش: 20px 0px; /* الحشو العلوي والسفلي */ الخلفية: #fff؛ /* للجمال، لون التعبئة */ الحشو: 4 بكسل /* للجمال، الحشو الداخلي */ الحدود: 1 بكسل صلب #ddd /* للجمال، حدود رمادية */ )

يُنصح باختيار صور بعرض 500 بكسل، بحيث تمتد على كامل عرض الشاشة على الشاشات الصغيرة وتبدو جميلة.
ترميز HTML لأعمدة الصور المستجيبة:

.............

...........

في هذه المقالة سننظر خطوة بخطوة في قواعد تخطيط موقع يحتوي على عمودين. سيسمح لك الكود الذي قدمناه بإضافة رأس وتذييل يمتد على هذين العمودين.

مقدمة

لإكمال المهام الواردة في هذه المقالة، يجب أن تكون لديك مهارات البرمجة في كل من HTML وCSS. إذا لم يكن الأمر كذلك، فمن الأفضل أن تستخدم محررًا مرئيًا.

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

استخدام الخاصية float لإنشاء عمودين

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

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

كود HTML الأساسي لموقع يحتوي على عمودين

جزء HTML من الكود بسيط للغاية. نحتاج فقط إلى قسمين div، واحد لكل عمود:

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

كود CSS لموقع ذو عمودين

يستخدم رمز CSS التالي النسب المئوية ("%") لتحديد عرض كلا العمودين. نظرًا لأنه يتم قياسها بالوحدات النسبية، فإنها ستتوسع أو تتقلص لملء نافذة المتصفح بأكملها، بغض النظر عن مدى اتساعها. على سبيل المثال، إذا قمت بتغيير حجم نافذة المتصفح، فسيقوم القالب بإعادة ترتيب العمود ليتناسب قدر الإمكان مع حدود النافذة.

كود CSS بسيط للغاية:

#content ( float: right ; width: 80% ; ) #navbar ( float: right; width: 20%; )

وفقًا لقواعد تخطيط الموقع، يجب وضع كود CSS في قسم الأنماط بصفحة الويب أو في ملف خارجي.

كيف يعمل الكود أعلاه عمليًا يمكن رؤيته هنا.

كيف يعمل: شرح كود CSS

تحدد القاعدة "float: right" كيفية تعويم DIV خارج تدفق المستند ووضعه على يمين جميع العناصر الأخرى التي تطفو إلى اليسار. تتم إزاحة كتلة DIV الأولى التي تظهر على صفحة HTML أولاً.

في المثال أعلاه، تم إزاحة "#content" إلى اليمين أولاً وتم ضبطه على 80% من عرض نافذة المتصفح. تقوم قاعدتنا التالية أيضًا بإخراج "#navbar" من تدفق المستند وإزاحته إلى اليمين.

نظرًا لأن لدينا بالفعل عنصرًا عائمًا في هذا الموضع. وفقًا لقواعد التخطيط التكيفي المحددة، يتم وضع الكتلة الثانية على يسار العنصر الموجود إذا كانت هناك مساحة كافية لها. وإلا فسيتم وضعه تحت العنصر الأول. مع أخذ ذلك في الاعتبار، يجب أن يكون مجموع جوانب كلا الكتلتين 100% أو أقل، وإلا فلن يكون لدينا مساحة كافية لوضعهما جنبًا إلى جنب.

كيفية وضع عمود التنقل على اليمين

الكود أعلاه يضع قائمة التنقل في العمود الأيسر. إذا كنت تريد أن تكون قائمة التنقل على اليمين، فقم بتغيير الرمز كما يلي:

#content ( float: left ; width: 80% ; ) #navbar ( float: left ; width: 20% ; )

يمكنك رؤية هذا الرمز قيد التنفيذ هنا من خلال النقر على زر التبديل الموجود في العمود الأيمن من قائمة التنقل.

كيفية تغيير العرض بشكل صحيح

وفقًا لقواعد التخطيط الفنية المعمول بها، تحدد الأنماط المذكورة أعلاه عرض العمود الجانبي بنسبة 20% من عرض نافذة المتصفح، وعرض عمود المحتوى بنسبة 80%، وهو ما يصل إلى 100%.

إذا كنت تخطط لتغيير هذه القيم، فتأكد من أن إجماليها يساوي 100% أو أقل من ذلك، وإلا فسيقوم المتصفح بوضع عمود واحد أسفل الآخر.

إذا تم إزاحة أحد الأعمدة أسفل الآخر: كيفية إصلاحه

إذا وجدت أن أحد العمودين يتناسب مع الآخر بدلاً من أن يكون جنبًا إلى جنب، فهذا يعني أن العرض الإجمالي لكلا العمودين يزيد عن 100% من عرض نافذة المتصفح.

يمكن أن يحدث هذا حتى إذا استخدمت قيمتي "20%" و"80%". على سبيل المثال، إذا قمت بإضافة الهوامش والحدود والحشوة إلى أحد العمودين أو كليهما. كما سيتم زيادة عرض هذه الأعمدة، مما يؤدي إلى تجاوز الإجمالي 100%.

تتضمن قواعد التوافق والتخطيط عبر المستعرضات طريقتين لحل هذه المشكلة:

• قم بتقليل عرض العمود حتى يعرضه المتصفح بالطريقة التي تريدها. لكن تذكر أن النسب المئوية هي وحدة قياس نسبية. وهو مرتبط بعرض نافذة متصفح المستخدم. لذا، إذا قمت باختبار التخطيط على نظامك ووجدت أن إضافة 10 بيكسل إلى المساحة المتروكة من اليسار إلى أحد الأعمدة وتقليل العرض بنسبة 1% يعمل بشكل جيد، فلا يمكنك استنتاج أن 1% = 10 بيكسل. بمعنى آخر، 1% من 1024 بكسل يختلف عن 1% من 1920 بكسل، وهكذا. تأكد من مراعاة الاختلافات في عرض النوافذ في المتصفحات الأخرى وأقطار الشاشة؛
• الحل الذي أفضّله هو إنشاء DIV متداخل داخل كتل "#navbar" و"#content"، ووضع كل الحشو والهوامش والحدود والمحتوى الفعلي بداخله. وبالتالي، بالنسبة للكتل الخارجية، يمكنك ترك الـ 20% و80% القديمة دون القلق بشأن تعديلات الهوامش والحشو وما إلى ذلك.

على سبيل المثال، في موقع تجريبي مع عمودينيتم استخدام تعليمات HTML البرمجية التالية لإنشاء كتلة DIV متداخلة:

إلى أنماط CSS التي كتبتها سابقًا، أضف الخصائص التالية لـ "#innercontent" و"#innernavbar":

#innercontent ( الحشو على اليسار: 10 بكسل ؛ الحشو على اليمين: 10 بكسل ; ) #innernavbar ( الحشو على اليسار: 5 بكسل ؛ الحشو على اليمين: 5 بكسل ; )

يبقى CSS لـ "#content" و"#navbar" كما هو موضح في النصف الأول من هذه المقالة.

نظرًا لتطبيق الحشو على كتلة DIV الداخلية، تظل أبعاد الكتل الخارجية كما هي ونحافظ على تخطيط من عمودين.

كيفية إضافة رأس وتذييل موقع يمتد على كلا العمودين

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