كيفية محاذاة DIVs أفقيا في المغلق

المحتوى

• الاتجاهات
• تحديد المواقف المطلقة للعلامات div
• box1 {margin-left: 100px؛ }
• box2 {margin-left: 400px؛ }
• box3 {margin-left: 700px؛ }
• تطفو عناصر DIV
• نصائح
• تحذير
• ما تحتاجه

تحدد علامات HTML "div" تخطيط صفحات الويب. يتم استخدام أوراق الأنماط المتتالية لتصميم علامات HTML داخل الصفحات. تُستخدم خصائص "id" و "class" في CSS لتطبيق أنماط معينة. يمكن تعريف هذه الأنماط الشائعة لعدة علامات "div" في "فئة" ، ولكن يجب تعريف الأنماط الفريدة بخاصية "id" للعلامة "div" المعينة ، حيث لا يمكن استخدام هذه الخاصية إلا مرة واحدة. سيظهر عنصر div مجاور أسفل العنصر "div" السابق ما لم يتم تطبيق نمط محاذاة أفقياً.

الاتجاهات

تلغي علامات HTML "div" الحاجة إلى استخدام الجداول لتخطيط الصفحة (كومستوك / كومستوك / غيتي إيماجز)

تحديد المواقف المطلقة للعلامات div

1. افتح صفحة HTML وملف CSS المقترن في نافذتين مختلفتين من HTML أو محرر نصوص أساسي ، مثل المفكرة.

2. حدد جميع علامات div التي سيتم محاذاتها وإنشاء فئة "halign" فريدة من نوعها:

   أول div

   div الثاني div الثالث

   إذا تم استخدام "halign" بالفعل كاسم فئة في مكان آخر في HTML ، فاستخدم اسمًا آخر وتأكد من أنه فريد من نوعه.

3. أعط أسماء "id" لجميع العناصر "div" التي يجب محاذاتها. قم بتضمين أرقام ضمن الأسماء لتحديد ترتيب الموضع. على سبيل المثال ، استخدم الأسماء "box1" و "box2" وما إلى ذلك:

   أول div

   div الثاني div الثالث

   لاحظ الأسماء "id" التي تم استخدامها بالفعل.

   
   

4. افتح ملف CSS وأدخل ما يلي:

   .halign {position: absolute؛ أعلى: XXX ؛ }

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

5. تحرير كتل نمط "div" الفردية في CSS. حدد أسماء "id" في الكود وأضف سطر الكود "left: YYY" داخل كل كتلة ، واستبدل "YYY" بالقيم المطلقة للهوامش اليسرى للعناصر. "الهامش المطلق" هو ​​المسافة بين حافة شاشة المتصفح و div المطابق. سيكون للهامش قيم أكبر لوضع divs جنبًا إلى جنب:

   box1 {margin-left: 100px؛ }

   box2 {margin-left: 400px؛ }

   box3 {margin-left: 700px؛ }

تطفو عناصر DIV

1. افتح ملف CSS في محرر النصوص.

2. حدد اسمًا فريدًا لـ "فئة" ، مثل "halign" ، وأدخل "float: left؛" في كتلة التعليمات البرمجية وحفظ الملف.

3. افتح HTML في نافذة محرر نصوص جديدة وتأكد من أن جميع العناصر التي تحتاج إلى محاذاة مجاورة.

   
   

4. قم بتوصيل اسم الفئة "halign" بالعناصر "div" المجاورة التي يجب محاذاتها.

5. ضع الكود التالي في مقدمة مجموعة العناصر "div" في HTML:

نصائح

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

تحذير

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

ما تحتاجه

• محرر النص