واحدة من المشاكل الشائعة عند تكوين صفحات الويب هي الضغط على النص إلى أسفل الكتلة. غالبا ما تنشأ مهام مماثلة عند إنشاء تذييل ، حيث يكون من الضروري الضغط على النص إلى أسفل الشاشة أو الحظر. في هذه المقالة ، سننظر في عدة طرق لحل هذه المشكلة باستخدام كس.
الطريقة الأولى هي استخدام خاصية كس فليكسبوكس. فليكسبوكس يجعل من السهل للسيطرة على وضع العناصر داخل الحاوية. للضغط على النص إلى أسفل الكتلة ، يمكننا استخدام خاصية محاذاة العناصر مع قيمة النهاية المرنة. مثال على الكود:
- المغلق:
- .حاوية {
الارتفاع: 100 فولت;
- عرض: الشبكة;
- مكان العناصر: النهاية;
- }
- الهامش السفلي: 0;
.النص {
}
وهكذا ، وذلك باستخدام خصائص فليكسبوكس والشبكة في كس ، يمكنك بسهولة الضغط على النص إلى أسفل الكتلة. يعتمد اختيار طريقة أو أخرى على المهمة ودعم المتصفح. تجربة مع أساليب مختلفة واختيار أنسب واحد للمشروع الخاص بك.
- كيفية وضع النص في الجزء السفلي من كتلة باستخدام كس
طرق تقريب النص من الحد السفلي للكتلة باستخدام كس
سؤال وجواب
كيف يمكنني الضغط على النص إلى أسفل كتلة باستخدام المغلق?
ما رمز المغلق يجب أن تكون مكتوبة بحيث يبقى النص في الجزء السفلي من كتلة, حتى لو محتوياته صغيرة?
كيف يمكنني جعل النص الضغط على الجزء السفلي من كتلة دون استخدام المواقع المطلق?
كيف يمكنني الضغط على النص إلى أسفل الكتلة, لكن احتفظ بهوامشها الداخلية?
كيف يمكنني الضغط على النص إلى أسفل الكتلة فقط على الأجهزة المحمولة?
هل من الممكن لجعل النص اضغط تلقائيا ضد الجزء السفلي من كتلة دون تحديد قيم محددة?
كيفية وضع النص في الجزء السفلي من كتلة باستخدام كس
عند إنشاء صفحة ويب ، قد تحتاج أحيانا إلى وضع نص في أسفل الكتلة لجعله يبدو ممتعا ومنطقيا من الناحية الجمالية. باستخدام المغلق (أوراق الأنماط المتتالية) يمكنك بسهولة تحقيق هذا الهدف.
ستساعدك الطرق التالية في ترتيب النص في أسفل الكتلة:
استخدام خاصية العرض مع القيمة المرنة.
استخدام خاصية الموضع بالقيمة المطلقة.
استخدام خاصية الموضع ذات القيمة الثابتة.
باستخدام خاصية الموضع مع القيمة اللاصقة.
باستخدام خاصية العرض مع قيمة الشبكة.
يعتمد اختيار الطريقة على بنية هتمل والتصميم الذي تريد إنشاؤه.
استخدام خاصية العرض مع القيمة المرنة:
إنشاء كتلة الأصل مع النص داخله. تعيين خاصية العرض مع القيمة المرنة للكتلة الأصل. ثم قم بتطبيق خاصية الاتجاه المرن مع قيمة العمود بحيث يتم وضع النص عموديا. أخيرا ، قم بتعيين خاصية تبرير المحتوى إلى نهاية مرنة بحيث يتماشى النص مع الحافة السفلية للكتلة.
استخدام خاصية الموضع مع القيمة المطلقة:
قم بإنشاء كتلة أصل ذات موضع نسبي ، يوجد بداخله النص. تعيين خاصية الموضع مع القيمة المطلقة لكتلة النص وتعيين أسفل: 0 لجعل النص يلتصق بأسفل الكتلة.
استخدام خاصية الموضع ذات القيمة الثابتة:
قم بإنشاء كتلة أصل ذات موضع نسبي ، يوجد بداخله النص. اضبط خاصية الموضع بالقيمة الثابتة لكتلة النص واضبط القاع: 0 بحيث يتم لصق النص دائما في أسفل نافذة المتصفح.
باستخدام خاصية الموضع مع القيمة اللاصقة:
قم بإنشاء كتلة أصل ذات موضع نسبي ، يوجد بداخله النص. قم بتعيين خاصية الموضع بالقيمة اللاصقة لكتلة النص وقم بتعيين أسفل: 0 بحيث يظل النص في أسفل الكتلة عند التمرير في الصفحة. هذه الطريقة غير مدعومة من قبل جميع المتصفحات ، لذا كن حذرا.