আমরা সিএসএস ফ্লোট প্রপার্টি ব্যবহার করে এইচটিএমএলে উপাদানগুলিকে সারিবদ্ধ করতে পারি যা একটি বক্স বা বিষয়বস্তু অবস্থান নির্ধারণ বা ফর্ম্যাট করার জন্য ব্যবহৃত হয়। বিকাশকারী সিএসএস ফ্লোট সহ বাম বা ডান দিকে উপাদান অবস্থান করতে পারে।
উদাহরণ
আসুন উপাদানগুলি সারিবদ্ধ করার জন্য CSS ফ্লোট সম্পত্তির একটি উদাহরণ দেখি -
<!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 ফ্লোট প্রপার্টির আরেকটি উদাহরণ দেখি<!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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
