inline-block এর মাধ্যমে লে-আউট তৈরি
display: inline-block;
দীর্ঘ সময় ধরে float প্রোপার্টি ব্যবহার করে গ্রিড(gird) বক্স তৈরি করা হতো, ব্রাউজার রিসাইজ করলে যা ব্রাউজারের সম্পূর্ণ প্রস্থ দখল করে এবং কন্টেন্টসমূহকে সুন্দরভাবে মুড়িয়ে(wrapping) ফেলে।
যাইহোক display: inline-block; ব্যবহার করে এই কাজ আরো সহজে করা সম্ভব।
Inline-block এলিমেন্ট ইনলাইন এলিমেন্ট এর মতই, কিন্তু inline-block এর ক্ষেত্রে নির্দিষ্ট প্রস্থ এবং উচ্চতা থাকতে পারে।
float-ব্যবহারের পূর্বের পদ্ধতি
নিচের উদাহরণে লক্ষ্য করলে দেখবেন, ফ্লোটিং বক্সের পরে clear প্রোপার্টি ব্যবহারের প্রয়োজন হয়েছে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরন</title>
<style>
.previous-float-box {
float: left;
width: 120px;
height: 35px;
margin: 10px;
padding:10px;
background-color:#eee;
border: 2px solid #ee0000;
}
.current-flot-box {
clear: left;
border: 3px solid teal;
background-color:#eee;
}
</style>
</head>
<body>
<p>float এর পূর্বের ব্যবহার পদ্ধতি এমন ছিল</p>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="current-flot-box">পুরাতন পদ্ধতিতে ফ্লোট বক্সের পর একটি নতুন বক্স।</div>
</body>
</html>
ফলাফল
inline-block এর নতুন ব্যবহার পদ্ধতি
নিচের উদাহরণে লক্ষ্য করুন, ফ্লোটিং বক্সে display:inline-block ব্যবহার করা হয়েছে ফলে পরের ফ্লোটিং এর জন্য clear প্রোপার্টি ব্যবহারের প্রয়োজন হয়নি।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরন</title>
<style>
.previous-float-box {
display: inline-block;
width: 120px;
height: 35px;
margin: 10px;
padding:10px;
background-color:#eee;
border: 2px solid #ee0000;
}
.current-flot-box {
border: 3px solid #9400d3;
background-color:#eee;
}
</style>
</head>
<body>
<p>float এর নতুন ব্যবহার পদ্ধতি</p>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="previous-float-box">ফ্লোট বক্স</div>
<div class="current-flot-box">নতুন পদ্ধতিতে ফ্লোট বক্সের পর, একটি নতুন বক্স</div>
</body>
</html>
ফলাফল