غالبا ما يواجه مطورو الويب مهمة وضع نص على يمين الصورة على صفحات الويب الخاصة بهم. يمكن أن يكون هذا مفيدا عندما تحتاج إلى إنشاء مقال أو مدونة مع رسم توضيحي أو مجرد إضافة تفاعل إلى الصفحة. ميزات كس الحديثة تجعل من السهل حل هذه المشكلة دون الحاجة إلى إجراء تغييرات على ترميز هتمل.
للقيام بذلك ، يمكنك استخدام خاصية تعويم كس ، والتي تسمح للعنصر "العائم" بمحاذاة إما إلى اليسار أو إلى الحافة اليمنى للحاوية الأصل. في حالة الصورة ، يكفي لفها في حاوية وتطبيق العوامة: تعويم: يسار ؛ أو تعويم: يمين ؛ خاصية النمط عليه. نتيجة لذلك ، ستتم محاذاة الصورة على الجانب الأيسر أو الأيمن من الحاوية ، وسيتدفق النص حولها من الجانب الآخر.
طريقة أخرى لتحقيق النتيجة المرجوة هي استخدام خاصية عرض كس مع قيمة فليكس. باستخدام هذا الأسلوب ، تحتاج إلى إنشاء حاوية يتم فيها وضع الصورة والنص. ثم يمكنك تحديد أنماط للحاوية الأصل باستخدام العرض: فليكس ؛ خاصية. سيسمح ذلك بوضع العناصر الموجودة داخل الحاوية أفقيا. بالإضافة إلى ذلك ، يمكنك استخدام خاصية تبرير المحتوى لتوزيع المساحة المتاحة بين الصورة والنص.
كل من هذه الأساليب تسمح لك لإنشاء تخطيط صفحة مرنة والتحكم في تخطيط العناصر باستخدام كس. إنها مفيدة جدا ويمكن استخدامها لإنشاء أنواع مختلفة من صفحات الويب. معرفة أساسيات كس ، يمكن لكل مطور بسهولة إنشاء محتوى مثير للاهتمام ومرئي لمواقعهم.
- تقنيات لوضع النص على يمين الصورة
- 1. باستخدام خاصية الطفو
- 2. باستخدام علامات الجدول و تد
- 3. باستخدام فليكس بوكس
- 4. باستخدام شبكة كس
- 5. باستخدام تحديد المواقع
- باستخدام خاصية الطفو
- تطبيق خاصية العرض بقيمة الكتلة المضمنة
- باستخدام تحديد المواقع المطلقة
- تطبيق خاصية فليكسبوكس إلى حاوية
- سؤال وجواب
- كيف يمكنني وضع النص على يمين الصورة باستخدام المغلق?
- هل يمكنني استخدام خصائص كس أخرى لوضع النص على يمين الصورة?
- كيفية ضمان الاستجابة عند وضع النص على يمين الصورة?
- هل من الممكن وضع عدة صور مع نصوصها على يمين بعضها البعض?
تقنيات لوضع النص على يمين الصورة
يعد وضع النص على يمين الصورة أحد أكثر تقنيات تصميم الويب شيوعا. هناك عدة طرق لتحقيق هذا التأثير باستخدام كس. في هذه المقالة ، سننظر في العديد منها.
1. باستخدام خاصية الطفو
واحدة من أسهل الطرق لوضع النص على يمين الصورة هي استخدام خاصية التعويم. تعيين تعويم: القيمة اليسرى للصورة وتعويم: القيمة الصحيحة للنص يسمح لك لمحاذاة أفقيا.
2. باستخدام علامات الجدول و تد
تعتمد طريقة أخرى لوضع النص على يمين الصورة على استخدام علامات الجدول وعلامات الدفتيريا. إنشاء جدول مع خليتين ، حيث ستكون الصورة في الخلية الأولى والنص في الثانية.
3. باستخدام فليكس بوكس
مع ظهور فليكسبوكس ، أصبح من الأسهل لترتيب العناصر على الصفحة في الترتيب الصحيح. ضبط العرض: خاصية فليكس على الحاوية ؛ والترتيب: خاصية 1 للعنصر الفرعي للصورة ؛ والترتيب: خاصية 2 للنص; ينقل النص إلى يمين الصورة.
4. باستخدام شبكة كس
هناك طريقة أخرى لوضع النص على يمين الصورة وهي استخدام شبكة كس التكيفية. قسم الحاوية إلى عمودين باستخدام أعمدة قالب الشبكة: تلقائي تلقائي ؛ خاصية. تعيين العرض والارتفاع من الصورة ، وموقف وهوامش النص.
5. باستخدام تحديد المواقع
إذا كنت بحاجة إلى تحديد الموقع الدقيق للنص بالنسبة للصورة ، فيمكنك استخدام الموضع باستخدام الموضع: نسبي ؛ خصائص الحاوية والموضع: مطلق ؛ للنص. اضبط النص على القيم المطلوبة للخصائص العلوية واليمنى والسفلية واليسرى لتحقيق التأثير المطلوب.
هذه ليست سوى بعض التقنيات التي يمكنك استخدامها لوضع النص بشكل صحيح على يمين الصورة باستخدام كس. اختر الطريقة التي تناسب متطلباتك ومتطلبات مشروعك.
باستخدام خاصية الطفو
الخاصية تعويم هي واحدة من الطرق الرئيسية لترتيب العناصر على صفحة باستخدام كس. يسمح للعناصر "بالتعويم" حول العناصر الأخرى ، مما يسمح لك بإنشاء تخطيطات مثيرة للاهتمام ودمج الصور والنصوص.
مثال على استخدام خاصية التعويم:
كود أتش تي أم أل:
- إنشاء حاوية من الكتل مع فئة " الحاوية:
- - كتلة للصورة;
- كتلة للنص.- رمز المغلق:
تطبيق تعويم: اليسار ؛ إلى الكتلة مع الصورة:
.صورة { تعويم: اليسار؛}
- تطبيق الهامش الأيسر على كتلة النص لمحاذاته على يمين الصورة:
- .نص { الهامش الأيسر: 20 بكسل؛}
- وصف الخطوات:
- إنشاء حاوية للكتل باستخدام العلامة
وإضافة فئة" الحاوية " إليها.
داخل الحاوية ، نقوم بإنشاء كتلتين باستخدام علامة
. نضيف فئة" صورة "للكتلة الأولى ، وفئة" النص " للثانية.
في ملف كس ، نطبق تعويم: اليسار ؛ الملكية إلى كتلة مع فئة" صورة". سيسمح هذا للصورة "بالطفو" إلى اليسار.
أيضا في ملف كس ، إضافة هامش اليسار إلى كتلة مع فئة" النص". تحدد قيمة الهامش الأيسر الهامش الموجود على اليسار لمحاذاة النص إلى يمين الصورة.
لذلك ، باستخدام خاصية التعويم ، يمكننا وضع النص على يمين الصورة. في هذه الحالة ، سوف "يطفو" النص حول الصورة ، مما سيخلق تخطيطا مثيرا للاهتمام وجمالا.
تطبيق الأنماط:
نتيجة لذلك ، نحصل على الصورة الموجودة على اليسار والنص الموجود على يمينها.
- خاصية العرض: يعد الحظر المضمن مفيدا أيضا لإنشاء قوائم بها رموز ، حيث توجد الصورة أو الرمز على اليسار والنص على يمينها.
- كما ترى من المثال أعلاه ، تتيح لك خاصية العرض ذات قيمة الكتلة المضمنة تحقيق النتيجة المرجوة عندما تحتاج إلى وضع النص على يمين الصورة باستخدام كس.
- باستخدام تحديد المواقع المطلقة
- تتمثل إحدى طرق وضع النص على يمين الصورة باستخدام كس في استخدام الموضع: مطلق ؛ خاصية. عندما نضبط الموضع المطلق لعنصر ما ، يمكننا تحديد موقعه بالضبط على الصفحة باستخدام الخصائص أعلى ، يمين ، أسفل ، يسار.
- لاستخدام الموضع المطلق للنص ، يجب عليك إنشاء حاوية تحتوي على صورة ونص. داخل هذه الحاوية ، نضع علامات إمغ و ف للصورة والنص ، على التوالي.
في كس ، يمكننا تعيين القيم المطلوبة لخاصية الموضع للحاوية ، وكذلك استخدام الخصائص العلوية واليمنى والسفلية واليسرى لتحديد موقع الصورة والنص بالنسبة لبعضهما البعض.
نموذج التعليمات البرمجية:
النص
في هذا المثال ، ستشغل الصورة المساحة الموجودة على اليسار ، وسيكون النص موجودا في الزاوية اليمنى العليا من الحاوية.
من خلال تحديد الموقع المطلق ، يمكننا التحكم في موقع النص والصور وإنشاء اختلافات مختلفة في الموقع اعتمادا على احتياجات التصميم.
تطبيق خاصية فليكسبوكس إلى حاوية