HTML এলিমেন্টগুলো 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>
আউটপুট
উপরোক্ত কোডের আউটপুট:
