หยุดการเบียดบังพื้นที่ของรูป

หากว่าได้ลองใช้งานรูปมาพักนึง เราจะพบได้เลยว่าเราไม่สามารถจัดวัตถุให้อยู่ในตำแหน่งที่เราต้องการได้จริงๆ โดยถ้ามีรูป ตัวอักษรอาจจะต้องหลีกๆ หรือมีตัวอักษรรูปอาจจะต้องหลีกๆ ดังนั้นเรามาแก้ไขปัญหาเรื่องรูปนี้ด้วยการใช้การขึ้นบรรทัดใหม่แบบพิเศษ โดยใช้ clear นั่นเอง ซึ่งจะทำให้เราใช้งานพื้นที่ได้ดีมากขึ้น พูดแล้วเดี๋ยวงง ดูตามเลยดีกว่า

การหยุดการกินพื้นที่ของรูป
1.สร้างเนื้อหาเว็บตามที่ต้องการ โดยมีรูปและข้อความตามปรกติ
2.วาง cursor ในตำแหน่งที่ต้องการหยุดการกินพื้นที่ของรูป
3. เลือกใส่ tag ดังต่อไปนี้ <br clear=”left” /> เพื่อการหยุดการไหลของพื้นที่ โดยให้เริ่มวางวัตถุชิ้นต่อไปในฝั่งซ้ายมือ และ <br clear=”right” /> เพื่อการหยุดการไหลของพื้นที่ โดยให้เริ่มวางวัตถุชิ้นต่อไปในฝั่งขวามือ และ <br clear=”all” /> เพื่อการหยุดการไหลของพื้นที่ โดยให้เริ่มวางวัตถุชิ้นต่อไปในส่วนด้านสุดของวัตถุทุกๆชิ้น

เรารู้ว่าท่านงง ดูตัวอย่างครับ

<img src=”mindwebhost_logo.png” align=”left” width=”90px” height=”150px” alt=”host คุณภาพ บริการด้วยใจ”/>
<h3>MindWebHost host ที่บริการด้วยใจ</h1>

<img src=”mindwebhost_logo.png” align=”right” width=”50px” height=”50px” alt=”host คุณภาพ บริการด้วยใจ”/>
<br clear=”right” />
<p> หากคุณกำลังมองหา host สำหรับเว็บของคุณ
mindwebhost.com เป็นตัวเลือกสำหรับคุณแล้ว
บริการอย่างมั่นคงมาตั้งแต่ ปี 2549 จนถึงปัจจุบัน
เน้นคุณภาพไม่ใช่ปริมาณ มั่นใจได้ในคุณภาพ</p>
สิ่งเพิ่มเติมที่ 5.9 โค้ดสำหรับการนำพื้นที่ฝั่งขวาของรูปมาวางรูปได้ทันที

ข้อความนั้น มาวางต่อรูปที่อยู่ฝั่งขวามือในทันที
สิ่งเพิ่มเติมที่ 5.10 รูปจากโค้ด 5.9 จะเห็นได้ว่า ข้อความนั้น มาวางต่อรูปที่อยู่ฝั่งขวามือในทันที เหมือนกับเป็นการขึ้นบรรทัดใหม่ธรรมดา ซึ่งปรกติจะทำไม่ได้

เปลี่ยนเป็น <br clear=\"all\" /> ตัวหนังสือก็จะมาอยู่ที่ด้านล่างสุดของวัตถุทุกๆชิ้นนั่นเอง
สิ่งเพิ่มเติมที่ 5.11 รูปจากโค้ดที่ 5.9 แต่ว่าเปลี่ยนเป็น <br clear=”all” /> ตัวหนังสือก็จะมาอยู่ที่ด้านล่างสุดของวัตถุทุกๆชิ้นนั่นเอง

No comments yet.
You must be logged in to post a comment.