วิธีย้ายข้อความไปรอบๆ รูปภาพด้วย HTML หรือ CSS

เมื่อคุณใส่รูปภาพที่มีข้อความในเว็บเพจของคุณ สไตล์เริ่มต้นจะแสดงกราฟิกด้านบนหรือด้านล่างเนื้อหาโดยรอบ โดยเว้นพื้นที่สีขาวไว้ทางด้านซ้ายและด้านขวาของรูปภาพ วิธีนี้ทำให้เปลืองเนื้อที่และทำให้รูปภาพดูไม่ปะติดปะต่อจากข้อความของคุณ ในการแก้ไขปัญหานี้ คุณมีตัวเลือกให้ใช้ HyperText Markup Language (HTML) หรือ Cascading Style Sheets (CSS) เพื่อระบุตำแหน่งของรูปภาพเพื่อให้ข้อความล้อมรอบขอบของรูปภาพ ใช้ HTML หรือ CSS เพื่อย้ายข้อความไปรอบๆ รูปภาพของคุณ ตามที่คุณต้องการ

HTML

ขั้นตอนที่ 1

เปิดไฟล์เพจในโปรแกรมแก้ไขข้อความของคอมพิวเตอร์ และวางตำแหน่งเคอร์เซอร์ภายใน "แท็ก ". พิมพ์ "align=" และตามด้วยเครื่องหมายคำพูดดังนี้:

ขั้นตอนที่ 2

ป้อน "ขวา" "ซ้าย" "กลาง" "บน" หรือ "ล่าง" หลังรายการจัดแนวเพื่อระบุว่ารูปภาพของคุณจะปรากฏที่ใดโดยสัมพันธ์กับข้อความของคุณ การจัดตำแหน่ง "บนสุด" ทำให้เนื้อหาของคุณปรากฏที่จุดสูงสุดของภาพ ส่วน "กลาง" จะย้ายข้อความไปที่กึ่งกลางของรูปภาพ และ "ด้านล่าง" จะนำเนื้อหาไปเริ่มต้นที่ด้านล่างของกราฟิก นอกจากนี้ ตำแหน่ง "ขวา" จะย้ายข้อมูลของคุณไปทางซ้ายของรูปภาพ และการจัดตำแหน่ง "ซ้าย" จะวางเนื้อหาไว้ทางด้านขวาของรูปภาพ พิมพ์รหัสของคุณดังนี้:

บันทึกไฟล์.

CSS

ขั้นตอนที่ 1

วางเคอร์เซอร์ของคุณภายใน "" แท็กและพิมพ์ "style=" ด้วยชุดเครื่องหมายคำพูดก่อนวงเล็บมุมสุดท้าย เพื่อแสดง:

ขั้นตอนที่ 2

ป้อน "float:" ในเครื่องหมายคำพูดและพิมพ์แอตทริบิวต์ "left" หรือ "right" เพื่อตั้งชื่อการจัดตำแหน่งของกราฟิก ค่า "left" จะทำให้รูปภาพของคุณปรากฏทางด้านซ้ายและย้ายข้อความของคุณไปทางขวา ในขณะที่แอตทริบิวต์ "right" ทำสิ่งที่ตรงกันข้าม ตัวอย่างเช่น:

บันทึกเอกสารของคุณ