هل رأيت أن إعلانات المواقع الكبيرة يتم وضعها في منتصف المحتوى لتغليف النص؟ بشكل عام، لا يمكن وضع إعلانات المواقع الصغيرة العادية إلا في بداية المحتوى أو نهايته هذه الوظيفة هي أساسيات cms التي تستخدمها مواقعنا الإلكترونية الصغيرة بشكل شائع. لا توجد مثل هذه الوظيفة، لأنه من المستحيل إضافة علامة إعلانية تلقائيًا إلى علامة المحتوى، إلا إذا قمت بتحريرها يدويًا عند إضافة مقال، وهو أمر غير متعب.
لم أفكر أبدًا في استخدام CSS للتحكم فيه، ويرجع ذلك أساسًا إلى أنني لم أتوقع السمة الواضحة، فقد رأيت مقدمة بالصدفة اليوم وأدركت أن تنفيذ التفاف النص أمر بسيط للغاية.
مثال الكود:
<div style="float:left;height:300px;width:0">طبقة فارغة بعرض 0، باستخدام ارتفاع هذه الطبقة للتحكم في المواضع العلوية والسفلية لطبقة الإعلان</div>
<div style="float:left;height:250px;width:250px;clear:left;">كود الإعلان</div>
</div>
المفتاح يكمن في دور واضح: اليسار لديه ثلاث سمات: واضح: كلاهما، واضح: يسار، وواضح: يمين، والتي تشير على التوالي إلى مسح الكتل العائمة على كلا الجانبين، اليسار واليمين. إن إضافة Clear:left إلى طبقة الإعلان يعني أن الطبقة لن تطفو بعد الآن بالنسبة للطبقة الفارغة وستتحرك للأسفل، إنه أمر رائع، هاها.
دعونا نقارن:
<div style="float:left;height:300px;width:100px;background:#CCC;">أضف العرض والخلفية لتسهيل مراقبة التأثير</div>
<div style="float:left;height:250px;width:250px;">إذا قمت بإزالة التعويم الواضح، فسوف تفهم معناه</div>
</div>
إذا أضفت هذا:
لسوء الحظ، وجد الاختبار أعلاه أن IE هو الوحيد الممكن، حيث أن نتائج Firefox وOpera مختلفة. تأثير IE هو أن الصورة تتحرك تلقائيًا إلى الأسفل عند مواجهة طبقة الإعلان، ولن يتحرك Firefox إلى الأسفل، ولكنه لن يغطي طبقة الإعلان لأن طبقة الإعلان في المقدمة، لن تتحرك الصورة لأسفل وستغطي طبقة الإعلان.
تحسنت مرة أخرى:
أخيرًا تم الانتهاء من الأمر، إنه مثالي جدًا، واكتمل الآن تأثير المحتوى الإعلاني المحيط :)
//29-02-2008، تم التعديل بواسطة: ما هو
نسيت أن أضيف
| <style>.news{float:left;</style> |
سألني أحدهم هل يجب أن يكون النص ملتفًا في الأعلى والأسفل على اليمين، فغيرته كالتالي:
<div style="float:left;"> </div> |