সিএসএস ইনলাইন-ব্লক - Css inline-block



ওয়েব পেজের লে-আউট ডিজাইন করার সহজ এবং আধুনিকতম পদ্ধতি হল display প্রপার্টির inline-block মান।


display: inline-block;

অনেক দীর্ঘ একটা সময় ধরে float প্রোপার্টি ব্যবহার করে গ্রিড বা gird বক্স তৈরি করা হতো, ব্রাউজার রিসাইজ করলে যা ব্রাউজারের সম্পূর্ণ প্রস্থ দখল করে এবং কন্টেন্টগুলোকে সুন্দরভাবে মুড়িয়ে বা wrap করে দেয়।
কিন্তু display প্রপার্টির মান inline-block নির্ধারণ করে এই কাজটি আরো সহজে করা সম্ভব।

Inline-block এলিমেন্টটি ইনলাইন এলিমেন্ট এর মতই, কিন্তু inline-block এর ক্ষেত্রে নির্দিষ্ট প্রস্থ এবং উচ্চতা থাকতে পারে।


float ব্যবহার

নিচে একটি উদাহরণ দেখুন, এখানে ফ্লোটিং বক্সের পরে clear প্রোপার্টি ব্যবহার করা হয়েছে। এই পদ্ধতি আগে ব্যবহার করা হত।

উদাহরণ

.floating-box{
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box{
clear: left;
}
}




inline-block ব্যবহার

নিচের উদাহরণটি লক্ষ্য করুন, এখানে ফ্লোটিং বক্সে display:inline-block ব্যবহার করা হয়েছে এর ফলে পরের ফ্লোটিং এর জন্য clear প্রোপার্টি ব্যবহার করার প্রয়োজন হয়নি।

উদাহরণ

.floating-box{
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.