এই প্রবন্ধে, আমরা উল্লিখিত প্রতিটি পদ্ধতির এক এক করে আলোচনা করব এবং প্রতিটি পদ্ধতির একটি উপযুক্ত উদাহরণ প্রদান করব।
চল শুরু করা যাক!
পদ্ধতি 1: গ্রিড ব্যবহার করে CSS-এ দুটি ভাগ পাশাপাশি রাখুন
সিএসএস ' গ্রিড ” লেআউট ব্যবহারকারীকে দুই বা ততোধিক দুটি ডিভ পাশাপাশি রাখতে দেয়। মূলত, গ্রিড হল ডিসপ্লে প্রপার্টির একটি মান যা সারি এবং কলামের সমন্বয়ে একটি লেআউট তৈরি করতে ব্যবহৃত হয়।
বাক্য গঠন
গ্রিড লেআউট সহ ডিসপ্লে সম্পত্তির সিনট্যাক্স নীচে দেওয়া হল:
প্রদর্শন: গ্রিড
এখন, গ্রিড লেআউট ব্যবহার করে CSS-এ দুটি ডিভ পাশাপাশি রাখার সাথে সম্পর্কিত একটি উদাহরণ দেখুন।
উদাহরণ
এখানে, আমরা প্যারেন্ট ডিভের ভিতরে দুটি চাইল্ড ডিভ তৈরি করব, যার ক্লাসের নাম থাকবে “ অভিভাবক ', ' শিশু ' এবং ' শিশু ”:
< div ক্লাস = 'পিতামাতা' >< div ক্লাস = 'শিশু' < / div >
< div ক্লাস = 'শিশু' < / div >
< / div >
CSS বিভাগে পরবর্তী, ' ব্যবহার করুন .পিতামাতা প্যারেন্ট ডিভি অ্যাক্সেস করতে এবং ডিসপ্লে সম্পত্তির মান হিসাবে সেট করতে গ্রিড ” এরপর, ' ব্যবহার করে ভগ্নাংশ সেট করুন গ্রিড-টেমপ্লেট-কলাম কলামের জন্য স্থান তৈরি করার জন্য সম্পত্তি। আমাদের ক্ষেত্রে, আমরা ভগ্নাংশগুলিকে ' হিসাবে সেট করব 1fr ' এবং ' 1fr ”, যার অর্থ উভয় ডিভ সমান স্থান অর্জন করেছে। উপরন্তু, আমরা কলাম-গ্যাপ প্রপার্টি ব্যবহার করে দুটি কলামের মধ্যে ব্যবধান সেট করব এবং এর মান সেট করব “ 25px ”
CSS:
.পিতামাতা {প্রদর্শন : গ্রিড ;
গ্রিড-টেমপ্লেট-কলাম : 1fr 1fr ;
কলাম-ব্যবধান : 25px ;
}
পরবর্তী ধাপে, আমরা ব্যবহার করি ' .শিশু ” উভয় চাইল্ড ডিভ অ্যাক্সেস করতে এবং ডিভের উচ্চতা হিসাবে সেট করুন 250px ' এবং পটভূমির রঙ ' হিসাবে সেট করুন rgb(253, 5, 109) ”:
.শিশু {উচ্চতা : 250px ;
পটভূমি : rgb ( 253 , 5 , 109 ) ;
}
এটি নিম্নলিখিত ফলাফল দেখাবে:
ডিভ পাশাপাশি রাখার জন্য অন্য পদ্ধতিতে চলে যাই
পদ্ধতি 2: ফ্লেক্স ব্যবহার করে CSS-এ দুটি ভাগ পাশাপাশি রাখুন
দ্য ' ফ্লেক্স ” হল ডিসপ্লে প্রপার্টির মান যা দুটি ডিভ পাশাপাশি রাখার অনুমতি দেয়। এই বৈশিষ্ট্যটি নমনীয় আইটেমের জন্য একটি নমনীয় দৈর্ঘ্য সেট করতে ব্যবহৃত হয়। এটি তার পাত্রে ফিট করার জন্য ফ্লেক্স আইটেমটিকে সঙ্কুচিত বা বৃদ্ধি করে।
বাক্য গঠন
ফ্লেক্স সহ ডিসপ্লে সম্পত্তির সিনট্যাক্স নীচে দেওয়া হল:
প্রদর্শন: flex;উল্লিখিত ধারণা বোঝার জন্য উদাহরণে যাওয়া যাক।
উদাহরণ
আমরা একই HTML ফাইল বিবেচনা করব এবং প্রয়োগ করব ' ফ্লেক্স অভিভাবক পাত্রে. এখানে, আমরা ডিসপ্লে প্রপার্টির মান ফ্লেক্স হিসাবে সেট করব এবং চাইল্ড ডিভের মধ্যে ব্যবধান সেট করব “ 10px ”:
.পিতামাতা {প্রদর্শন : ফ্লেক্স ;
ফাঁক : 10px ;
}
এর পরে, ডিভের প্রস্থ, উচ্চতা এবং ব্যাকগ্রাউন্ডের রঙ হিসাবে সেট করুন “ 650px ', ' 200px ', এবং 'rgb(0, 255, 42) ', যথাক্রমে:
.শিশু {প্রস্থ : 650px ;
উচ্চতা : 200px ;
পটভূমি : rgb ( 0 , 255 , 42 ) ;
}
প্রদত্ত কোডের ফলাফল নীচে দেওয়া হল:
পদ্ধতি 3: ফ্লোট ব্যবহার করে CSS-এ দুটি ভাগ পাশাপাশি রাখুন
CSS ফ্লোট প্রপার্টি একটি উপাদানের ভাসমান দিক নির্দেশ করে। আরও নির্দিষ্টভাবে, এই সম্পত্তিটি CSS-এ পাশাপাশি দুটি ডিভ রাখার জন্য ব্যবহার করা যেতে পারে।
বাক্য গঠন
ফ্লোট সম্পত্তির সিনট্যাক্স হল:
float: কোনোটিই নয়|বাম|ডান|উপরে প্রদত্ত মানগুলির জন্য এখানে বর্ণনা রয়েছে:
- কোনোটিই না এটি ভাসমান সীমাবদ্ধ করতে ব্যবহৃত হয়।
- বাম: এটি বাম দিকে উপাদান ভাসানোর জন্য ব্যবহৃত হয়।
- ডান এটি উপাদানগুলিকে ডান দিকে ভাসানোর জন্য ব্যবহৃত হয়।
ডিভ পাশাপাশি রাখার উদাহরণে আসা যাক।
উদাহরণ
এখন, আমরা
ট্যাগের ভিতরে দুটি ডিভ তৈরি করব এবং ক্লাসের নাম বরাদ্দ করব “ div1 ' এবং ' div2 ”: < শরীর >< div ক্লাস = 'div1' < / div >
< div ক্লাস = 'div2' < / div >
< / শরীর >
তারপর, ব্যবহার করুন ' .div1 ' এবং ' .div2 ” HTML বিভাগে যোগ করা পাত্রে অ্যাক্সেস করতে। আমরা একই ক্লাসে উভয় ডিভ ব্যবহার করব কারণ আমরা উভয়ের জন্য যে বৈশিষ্ট্য এবং মান নির্ধারণ করতে যাচ্ছি তা একই।
এরপরে, আমরা ফ্লোট প্রপার্টির মান নির্ধারণ করি “ বাম ' এবং div এর প্রস্থ এবং উচ্চতা ' হিসাবে সেট করুন পঞ্চাশ% ' এবং ' 40% ” আমরা বক্স-সাইজিং প্রপার্টিও ব্যবহার করি এবং এর মান সেট করি “ বর্ডার-বক্স ” তদ্ব্যতীত, ডিভের পটভূমির রঙ হিসাবে সেট করুন “ rgb(7, 255, 222) ' এবং সীমানা সম্পত্তির মান ' হিসাবে সেট করুন 3px ', ' কঠিন ', এবং ' rgb(255, 0, 255) ”:
.div1 , .div2 {ভাসা : বাম ;
প্রস্থ : পঞ্চাশ% ;
উচ্চতা : 40% ;
বক্স-সাইজিং : বর্ডার-বক্স ;
পটভূমি : rgb ( 7 , 255 , 222 ) ;
সীমান্ত : 3px কঠিন rgb ( 255 , 0 , 255 ) ;
}
বিঃদ্রঃ: আপনি ডিভের বিভিন্ন ব্যাকগ্রাউন্ড কালার সেট করে বক্স-সাইজিং প্রপার্টি এবং বর্ডার প্রপার্টি ব্যবহার না করে পাশাপাশি দুটি ডিভ রাখতে পারেন।
একবার আপনি উপরের কোডটি বাস্তবায়ন করলে, HTML ফাইলটি কার্যকর করে এবং ফলাফলটি দেখুন:
বিঃদ্রঃ: দুটি ডিভের মধ্যে ব্যবধান তৈরি করতে প্রথমে আরেকটি ডিভ তৈরি করুন এবং তারপর সেই অনুযায়ী ডিভের মার্জিন সেট করুন।
উপসংহার
সিএসএসের তিনটি ভিন্ন পদ্ধতি ব্যবহার করে ডিভগুলি পাশাপাশি স্থাপন করা যেতে পারে, যা হল “ ফ্লেক্স ' এবং ' গ্রিড ' প্রদর্শন সম্পত্তির মান এবং ' ভাসা 'সম্পত্তি। প্রতিটি পদ্ধতি দক্ষতার সাথে কাজ করে; যাইহোক, আপনি আমাদের প্রয়োজনীয়তা অনুযায়ী তাদের যেকোনও ব্যবহার করতে পারেন। এই নির্দেশিকায়, আমরা CSS ব্যবহার করে div পাশাপাশি রাখার তিনটি পদ্ধতি নিয়ে আলোচনা করেছি এবং সংশ্লিষ্ট উদাহরণ দিয়েছি।