เราสามารถจัดตำแหน่งองค์ประกอบใน HTML โดยใช้คุณสมบัติ CSS float ซึ่งใช้สำหรับการจัดตำแหน่งหรือจัดรูปแบบกล่องหรือเนื้อหา นักพัฒนาสามารถจัดตำแหน่งองค์ประกอบไปทางซ้ายหรือขวาได้ด้วย CSS float
ตัวอย่าง
ลองดูตัวอย่างการใช้งานคุณสมบัติ CSS float เพื่อจัดตำแหน่งองค์ประกอบ:
<!DOCTYPE html> <html> <head> <title>Alignment using CSS Float</title> <style> .screen { padding: 10px; width: 70%; margin: 0 auto; background-color: #f06d06; text-align: center; color: white; border-radius: 0 0 50px 50px; border: 4px solid #000; } .backSeats div{ margin: 10px; padding: 10px; color: white; border: 4px solid #000; } .backSeats div { background-color: #4CAF50; } .leftFloat{ float: left; } .rightFloat{ float: right; } </style></head> <body> <div class="screen">Screen</div> <div class="backSeats"> <div class="leftFloat">Premium Left Seat 1</div> <div class="leftFloat">Premium Left Seat 2</div> <div class="rightFloat">Premium Right Seat 1</div> </div> </div> </body> </html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
ตัวอย่าง
ลองดูตัวอย่างเพิ่มเติมของคุณสมบัติ CSS float เพื่อจัดตำแหน่งองค์ประกอบ:
<!DOCTYPE html> <html> <head> <title> Alignment using CSS Float</title> <style type="text/css"> p { float: left; margin: 10px; padding: 10px; color:white; background-color: #48C9B0; border: 4px solid #145A32; } p.noneFloat{ float: none; clear: both; color: #34495E; } </style></head> <body> <p>I love Java.</p> <p class="noneFloat">I think C# is better.</p> <p>Even C isn't a bad choice.</p> <p>I agree!</p> </body> </html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
