تعرف على كيفية جعل النص يلتف حول صورة عائمة باستخدام CSS.
لجعل النص يلتف حول الصورة على اليمين ، على غرار ما هو عليه في الصورة التي تقدم هذه المقالة ، استخدم قاعدة CSS مثل هذه:
تعمل قاعدة Float: left على نقل الصورة إلى الهامش الأيسر. تحافظ قاعدة يمين الحشو على عدم ارتطام النص بالجانب الأيمن من الصورة. إذا تمت إضافة حد إلى هذه الصورة ، فستظهر مساحة متروكة بين الصورة والحد. انظر القسم 2 للعمل مع صورة ذات حد.
بعد ذلك ، أضف هوامش إلى يسار ويمين الصورة لتوسيطها. القيمة المناسبة للهوامش اليمنى واليسرى لتوسيط أي شيء هي القيمة التلقائية.
لإنشاء حد سميك يشبه الإطار باستخدام نمط حدود الأخدود ، يمكن استخدام قاعدة مثل هذه:
أنماط الحدود الأخرى صلبة ، ومنقطة ، ومتقطعة ، ومزدوجة ، وحافة ، وإدراج ، وبداية. يمكن التعبير عن العرض بالبكسل أو ems أو النسب المئوية.
يمكن تطبيق الحدود بشكل انتقائي على أعلى ويمين وأسفل ويسار الصورة. يمكنك استخدام هذه المعرفة لإنشاء تأثير مثل الظل المسقط.
باستخدام حد متصل بدرجتين من اللون الرمادي على الحد الأيمن والسفلي فقط ، ستحصل على تأثير الظل المسقط.
img {float: left؛ نمط الحدود اليمنى: صلب ؛ عرض يمين الحد: 8 بكسل ؛ لون يمين الحد: #CCCCCC ؛ نمط الحد السفلي: صلب ؛ عرض أسفل الحد: 8 بكسل ؛ لون الحد السفلي: # 999999 ؛ الهامش الأيمن: 1em ؛ الهامش السفلي: 1em ؛ }
نصيحة
إذا كانت لديك صور في أكثر من قسم (div) للصفحة ، فاستخدم المحددات الفرعية لتصميم كل منها على حدة. المحددات المحتملة: #content img، #sidebar img، #feature img.
