CSS+DIV: لف أحرف النص حول صورتك

الكاتب：Eve Cole وقت التحديث：2009-05-31 00:49:51

عند رؤية التأثير أعلاه، قد تعتقد أن هذه مجرد صورة تحتوي على نص؛ هاها، استخدم الماوس لتحديد النص واكتشف أن هذا عبارة عن مزيج كامل من الصورة والنص أدناه، دعنا نقدم لك كيفية القيام بذلك.

دعونا نلقي نظرة على الكود أولاً:

وفيما يلي المحتوى المقتبس:
<div معرف = "معلومات">
<h2>تتبع صورك</h2>
<div معرف = "holdit">
<img src="/imagelist/06/24/4fnpgj5042e6.jpg" alt="ويني ذا بوه" title="ويني ذا بوه" />




























"يجب أن أنتظر حتى أتمكن من اللحاق به"، قال ويني ذا بوه، "والآن، انظر هناك." وأشار إلى الأرض أمامه، "ماذا ترى هناك؟"< ر />
"مسارات،" قال بيجليت، "علامات مخلب." وأصدر صريرًا صغيرًا من الإثارة. "أوه، بوه! هل تعتقد أنها --أ--ووزل؟"
"قد يكون كذلك،" قال بوه، "أحيانًا يكون كذلك، وأحيانًا لا يكون كذلك. لا يمكنك معرفة ذلك أبدًا من خلال علامات المخالب." 
بهذه الكلمات القليلة، تابع تعقبه، وبعد أن راقبه لمدة دقيقة أو دقيقتين، ركض ويني-ذا-بوه وراءه فجأة، وكان ينحني فوق المسارات بطريقة محيرة. 
"ما الأمر؟" سأل الخنزير الصغير. 
قال الدب: "إنه أمر مضحك للغاية، ولكن يبدو أن هناك حيوانين الآن. وقد انضم إلى هذا - مهما كان - حيوان آخر - مهما كان...
وهما الآن يتقدمان برفقة، هل تمانع في القدوم معي يا خنزير صغير، في حالة تبين أنهما حيوانات معادية؟" 
حك الخنزير الصغير أذنه بطريقة لطيفة، وقال إنه ليس لديه ما يفعله حتى يوم الجمعة، وسيكون سعيدًا بالحضور، في حال كان الأمر مجرد Woozle. 
قال ويني ذا بوه: "تقصد، في حالة وجود اثنين من ووزلز"، وقال بيجليت إنه على أية حال ليس لديه ما يفعله حتى يوم الجمعة. لذلك ذهبا معًا.
</div>
</div>