หากต้องการใช้รูปภาพแบบลอยใน HTML ให้ใช้คุณสมบัติ CSS float ช่วยให้คุณลอยภาพไปทางซ้ายหรือขวา ค่าคุณสมบัติเพิ่มเติมได้แก่:
| Sr.No. | มูลค่าทรัพย์สิน &คำอธิบาย |
|---|---|
| 1 | ไม่มี ไม่ลอย |
| 2 | ซ้าย ลอยไปทางซ้าย |
| 3 | ขวา ลอยไปทางขวา |
| 4 | เริ่มต้น ค่าเริ่มต้น |
ตัวอย่าง
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้รูปภาพลอยใน HTML นี่คือการใช้แอตทริบิวต์ CSS ลอยขวาและลอยซ้าย
<!DOCTYPE html> <html> <head> <title>HTML Floating Image</title> </head> <body> <h1>Float Right</h1> <p>The below image floats to the right.</p> <p> <img src="https://www.tutorialspoint.com/green/images/logo.png" style="float:right" width="190" height="84" /> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> <h1>Float Left</h1> <p>The below image floats to the left.</p> <p> <img src="https://www.tutorialspoint.com/green/images/logo.png" style="float:left" width="190" height="84" /> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </body> </html>
ผลลัพธ์
