CSS+DIV: ตัดข้อความรอบๆ รูปภาพของคุณ

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-05-31 00:49:51

เมื่อเห็นเอฟเฟกต์ข้างต้นคุณอาจคิดว่านี่เป็นเพียงรูปภาพพร้อมข้อความ 555 ใช้เมาส์เพื่อเลือกข้อความแล้วพบว่านี่เป็นการรวมรูปภาพและข้อความเข้าด้วยกัน ด้านล่างนี้ฉันมาแนะนำวิธีการทำกัน

มาดูโค้ดกันก่อน:

ต่อไปนี้เป็นเนื้อหาที่ยกมา:
<div id="ข้อมูล">
<h2>การติดตามภาพของคุณ</h2>
<div id="holdit">
<img src="/imagelist/06/24/4fnpgj5042e6.jpg" alt="วินนี่เดอะพูห์" title="วินนี่เดอะพูห์" />




























"ฉันจะต้องรอจนกว่าฉันจะตามทัน" วินนี่เดอะพูห์กล่าว "ดูนั่นสิ" เขาชี้ไปที่พื้นข้างหน้าเขา "คุณเห็นอะไรที่นั่น" br />
“แทร็ก” พิกเล็ตพูด “อุ้งเท้า” เขาส่งเสียงตื่นเต้นเล็กน้อย “โอ้ พูห์! คุณคิดว่ามันเป็น--a--วูซล์หรือเปล่า?” 
“มันอาจจะเป็นก็ได้” พูห์กล่าว “บางครั้งก็เป็น และบางครั้งก็ไม่ใช่ คุณไม่สามารถบอกได้ด้วยอุ้งเท้า” 
ด้วยคำพูดไม่กี่คำนี้ เขาจึงเดินตามไป และหลังจากเฝ้าดูเขาอยู่ครู่หนึ่งหรือสองนาที วินนี่-เดอะ-พูห์ก็หยุดกะทันหัน และก้มตัวลงบนรางรถไฟอย่างงุนงง 
"มีอะไรเหรอ?" พิกเล็ตถาม 
“มันเป็นเรื่องตลกมาก” แบร์กล่าว “แต่ตอนนี้ดูเหมือนว่าจะมีสัตว์อยู่สองตัวแล้ว สิ่งนี้--อะไรก็ตาม-ที่เป็น---ก็มีอีกตัวหนึ่ง--อะไรก็ตามที่มันเป็น--
และตอนนี้ทั้งสองก็กำลังเดินทางเป็นเพื่อนกัน คุณช่วยมากับฉันได้ไหม พิกเล็ต เผื่อว่าพวกมันกลายเป็นสัตว์ที่ไม่เป็นมิตร" 
พิกเล็ตเกาหูของเขาอย่างดี และบอกว่าเขาไม่มีอะไรทำจนถึงวันศุกร์ และยินดีที่จะมา เผื่อว่ามันจะเป็นวูซล์จริงๆ 
"คุณหมายถึง ในกรณีที่เป็น Woozles สองตัวจริงๆ" วินนี่-เดอะ-พูห์พูด และพิกเล็ตก็บอกว่าเขาไม่มีอะไรทำจนกระทั่งวันศุกร์ พวกเขาจึงออกไปด้วยกัน
</div>
</div>