CSS লেআউট - ফ্লোট প্রয়োগ

এই পৃষ্ঠা সাধারণ ফ্লোটিং ক্যাসেসগুলি প্রদান করে।

গ্রিড / সমান প্রস্থতা বক্স

Box 1
Box 2
Box 1
Box 2
বক্স ৩

যদি ব্যবহার করেন float এই বৈশিষ্ট্যটি, ফ্লোটিং কনটেন্ট বক্সকে সহজেই উভয়পাশে ফ্লোট করতে পারে:

উদাহরণ

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* তিনটি বক্স (চারটি বক্সের জন্য 25%, দুটি বক্সের জন্য 50%, ইত্যাদি) */
  padding: 50px; /* যদি ছবিগুলির মধ্যে সাপেক্ষিক দূরত্ব যোগ করতে হয় */
}

আপনার হাতে চেষ্টা করুন

box-sizing কী হয়?

আপনি তিনটি ফ্লোটিং বক্সকে সহজেই উভয়পাশে তৈরি করতে পারেন। কিন্তু, যখন আপনি প্রত্যেক বক্সকে বিস্তারিত করতে কিছু সামগ্রী (যেমন, padding বা border) যোগ করেন, তখন এই বক্সটি ভেঙ্গে যায়。 box-sizing এই বৈশিষ্ট্যটি আমাদেরকে ফ্লটিং বক্সের মোট প্রস্থতা (এবং উচ্চতা) এর মধ্যে প্রান্তমুখী এবং সীমানা সম্মিলিত করতে দেয়, যার ফলে প্রান্তমুখীগুলি ফ্লটিং বক্সের মধ্যে থাকে এবং ভেঙ্গে যায় না。

আমাদের CSS Box Sizing এই চাপের মধ্যে box-sizing এবং আরও বেশি জানতে শিখুন。

ছবি উভয়পাশে

এই বক্সের গ্রিড (The grid of boxes) ছবিকেও উভয়পাশে দেখাতে ব্যবহার করা যায়:

উদাহরণ

.img-container {
  float: left;
  width: 33.33%; /* তিনটি বক্স (চারটি বক্সের জন্য 25%, দুটি বক্সের জন্য 50%, ইত্যাদি) */
  padding: 5px; /* যদি ছবিগুলির মধ্যে সাপেক্ষিক দূরত্ব যোগ করতে হয় */
}

আপনার হাতে চেষ্টা করুন

সমান প্রস্থতা বক্স

উপরোক্ত উদাহরণে, আপনি শিখেছেন কিভাবে সমান প্রস্থতা দিয়ে ফ্লোটিং বক্সকে উভয়পাশে ফ্লোট করতে হয়। কিন্তু, একই উচ্চতার ফ্লোটিং বক্স তৈরি করা তুলনামূলকভাবে সহজ নয়। তবে, একটি সবসময় উচ্চতা সেট করে দ্রুত সমাধান হতে পারে, যেমন নিচের উদাহরণে দেখা যাচ্ছে:

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

উদাহরণ

.box {
  height: 500px;
}

আপনার হাতে চেষ্টা করুন

কিন্তু, এইভাবে ফ্লেক্সিবিলিটি হারানো হয়। যদি ফ্ল্যাক্সের মধ্যে সবসময় একই সংখ্যক কনটেন্ট থাকে, তবে এটা সম্ভব। কিন্তু অনেকগুলি সময়ে, কনটেন্ট ভিন্ন হয়। আপনি যদি মোবাইলে উপরোক্ত উদাহরণটি চেষ্টা করেন, তবে দেখবেন যে দ্বিতীয়টি ফ্ল্যাক্সের বাইরে দেখানো হয়। এটা যে সময় সিএসএস৩ ফ্লেক্সবক্স ব্যবহৃত হয় - কারণ এটা ফ্ল্যাক্সকে স্বচালিতভাবে সমস্ত ফ্ল্যাক্সকে দীর্ঘতম ফ্ল্যাক্সের মতো সমান দৈর্ঘ্যে সামঞ্জস্য করতে পারে:

উদাহরণ

ফ্লেক্সবক্স ব্যবহার করে একটি ফ্লেক্সিবল বক্স তৈরি করুন

বক্স ১ - এটা কিছু টেক্সট, যাতে নিশ্চিত করা যায় যে কনটেন্ট খুবই উচ্চ। এটা কিছু টেক্সট, যাতে নিশ্চিত করা যায় যে কনটেন্ট খুবই উচ্চ। এটা কিছু টেক্সট, যাতে নিশ্চিত করা যায় যে কনটেন্ট খুবই উচ্চ। এটা কিছু টেক্সট, যাতে নিশ্চিত করা যায় যে কনটেন্ট খুবই উচ্চ। এটা কিছু টেক্সট, যাতে নিশ্চিত করা যায় যে কনটেন্ট খুবই উচ্চ।
বক্স ২ - আমার উচ্চতা বক্স ১-এর অনুসারে চলবে।

আপনার হাতে চেষ্টা করুন

ফ্লেক্সবক্সের একমাত্র সমস্যা হল যে এটা ইন্টারনেট এক্সপ্লোরার ১০ বা তার পূর্ববর্তী সংস্করণে কাজ করে না। আপনি আমাদের CSS Flexbox ফ্লেক্সবক্স বুথ লেআউট মডিউলের বিষয়ে আরও জানতে চিন্তা করুন

নেভিগেশন মেনু

যোগ করুন float অল্পক্ষণীয় লিঙ্ক তালিকাসহ হলুদ নেভিগেশন তৈরি করুন:

উদাহরণ

আপনার হাতে চেষ্টা করুন

ওয়েব লেআউট উদাহরণ

ব্যবহার করুন float প্রতিভূতি সম্পূর্ণ ওয়েব লেআউটকেও সাধারণত ব্যবহৃত হয়:

উদাহরণ

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

আপনার হাতে চেষ্টা করুন

আরও উদাহরণ

ফ্রেম এবং মার্গ যোগ করা ছবিটিকে অনুচ্ছেদের ডানদিকে ফ্লটিং করুন
ছবিটিকে অনুচ্ছেদের ডানদিকে ফ্লটিং করুন। ছবিতে ফ্রেম এবং মার্গ যোগ করুন
শিরোনামসহ ছবিটিকে ডানদিকে ফ্লটিং করুন
শিরোনামসহ ছবিটিকে ডানে ফ্লটিং করুন
প্রথম অনুচ্ছেদের প্রথম অক্ষরটিকে বামে ফ্লটিং করুন
প্রথম অনুচ্ছেদের প্রথম অক্ষরটিকে বামে ফ্লটিং করে এবং সেটির শৈলী নির্ধারণ করুন
ফ্লটিং ব্যবহার করে একটি ওয়েবসাইট তৈরি করুন
ফ্লটিং ব্যবহার করে একটি হোম পেজ তৈরি করুন যা হলুদ নেভিগেশন বার, হেডার, ফুটার, বাম নেভিগেশন এবং মূল কনটেন্ট

সমস্ত CSS ফ্লটিং প্রতিভূতি

প্রতিভূতি বর্ণনা
box-sizing উপাদানের প্রস্থ এবং উচ্চতা নির্ধারণের পদ্ধতি: তারা আবর্জনমূলক এবং ফ্রেমকে সমন্বিত করা উচিত কি?
clear কোনও সামগ্রী কীভাবে ফ্লোট করা হবে এবং কোনও অন্য সামগ্রীর পাশে কীভাবে ফ্লোট করা হবে
float এলাকা কীভাবে ফ্লোট করা হবে
overflow সামগ্রীর অতিরিক্ত হলে, তখন কনটেন্ট কীভাবে হবে
overflow-x সামগ্রীর অতিরিক্ত সামগ্রীর কনটেন্ট এলাকা যখন অতিরিক্ত হয়, তখন কনটেন্টের বাম/ডানদিকের মাঝবর্তী হবে
overflow-y সামগ্রীর অতিরিক্ত সামগ্রীর কনটেন্ট এলাকা যখন অতিরিক্ত হয়, তখন কনটেন্টের উপর/নীচের মাঝবর্তী হোক কীভাবে হবে