সিএসএস সম্পত্তি লেআউট জন্য একটি খুব গুরুত্বপূর্ণ সম্পত্তি। এটি আপনাকে আপনার ওয়েব পৃষ্ঠা ডিজাইনগুলিকে ঠিক যেমনটি আপনি তাদের প্রদর্শন করতে চান তার অবস্থান করতে দেয়-তবে এটি ব্যবহার করার জন্য আপনাকে এটি কীভাবে কাজ করে তা বুঝতে হবে।
স্টাইল শীটে, সিএসএস ভাসমান সম্পত্তি এই রকম দেখাচ্ছে:
.right {float: right; }
এটি ব্রাউজারকে বলে যে "ডান" বর্গটির সাথে সবকিছু ডানদিকে ভাসানো উচিত।
আপনি এটি এই মত বরাদ্দ করা হবে:
ক্লাস = "অধিকার" />
আপনি সিএসএস ফ্লোট সম্পত্তি দিয়ে কি ফ্লোট করতে পারেন?
আপনি একটি ওয়েব পৃষ্ঠায় প্রতিটি উপাদান ভাসা করতে পারবেন না। আপনি শুধুমাত্র ব্লক স্তরের উপাদান ভাসা করতে পারেন। এই উপাদানগুলি (), অনুচ্ছেদ (), বিভাগ (), এবং তালিকা () এর মতো পৃষ্ঠায় স্থানটির একটি ব্লক গ্রহণ করে এমন উপাদানগুলি।
অন্যান্য উপাদান যা পাঠ্যকে প্রভাবিত করে, কিন্তু পৃষ্ঠাতে একটি বাক্স তৈরি করে না, তাকে ইনলাইন উপাদান বলা হয় এবং ফ্লোট করা যায় না। এগুলি স্প্যান (), লাইন বিরতি (), শক্তিশালী জোর (), বা ইটালিক () হিসাবে উপাদান।
তারা কোথায় ভাসে?
আপনি ডান বা বাম উপাদান ভাসা করতে পারেন। ভাসমান উপাদান অনুসরণ করে যে কোন উপাদান অন্য দিকে ভাসমান উপাদান কাছাকাছি প্রবাহিত হবে।
উদাহরণস্বরূপ, যদি আমি বাম দিকে একটি চিত্র ভাসা করি তবে এটি অনুসরণ করে এমন কোনও পাঠ্য বা অন্যান্য উপাদান ডানদিকে এটি প্রবাহিত হবে। এবং যদি আমি ডানদিকে একটি চিত্র ভাসা করি, তবে যে কোনও পাঠ্য বা অন্যান্য উপাদান এটির নীচে বাম দিকে প্রবাহিত হবে। কোনও ফ্ল্যাট স্ট্যাটাস ছাড়াই কোনও ব্লকের পাঠ্যতে থাকা চিত্রটি প্রদর্শন করা হবে তবে ব্রাউজারটি চিত্র প্রদর্শন করতে সেট হবে। এটি সাধারণত ছবির নীচে প্রদর্শিত নীচের লিখিত লাইনের সাথে হয়।
কত দূর তারা ভাসবে?
ভাসমান একটি উপাদান যতটা সম্ভব কনটেইনার উপাদানটি বাম বা ডানদিকে সরানো হবে। আপনার কোডটি কীভাবে লিখিত হয় তার উপর নির্ভর করে এই বিভিন্ন পরিস্থিতিতে ফলাফল। এই উদাহরণের জন্য, আমি একটি ছোট ভাসমান করা হবে DIV বাম উপাদান:
- যদি ভাসমান উপাদানটির পূর্ব-নির্ধারিত প্রস্থ না থাকে তবে ফ্লোটটি নির্বিশেষে প্রয়োজনীয় এবং উপলভ্য হিসাবে যতটা অনুভূমিক স্থান গ্রহণ করবে। দ্রষ্টব্য: কিছু ব্রাউজার যখন প্রস্থ সংজ্ঞায়িত না হয় তখন ভাসমান উপাদানের পাশে উপাদান স্থাপন করার চেষ্টা করে - সাধারণত অ-ভাসমান উপাদানটি কেবলমাত্র অল্প পরিমাণে স্থান প্রদান করে। তাই আপনি উচিত সবসময় একটি প্রস্থ সংজ্ঞা ভাসমান উপাদান উপর।
- ধারক উপাদানটি এইচটিএমএল উপাদান, ভাসমান
DIVপৃষ্ঠার বাম মার্জিন বসতে হবে। - ধারক উপাদান নিজেই অন্য কিছু দ্বারা অন্তর্হিত হয়, ভাসমান
DIVধারক বাম মার্জিন উপর বসতে হবে। - আপনি ভাসমান উপাদান ঘুর্ণন করতে পারেন, এবং যে ভাসা একটি বিস্ময়কর জায়গায় শেষ পর্যন্ত হতে পারে। উদাহরণস্বরূপ, এই ভাসা একটি বাম floated হয়
DIVএকটি ভাসমান ভিতরে ভাসমানDIV. - পাত্রে উপাদান আছে যদি ভাসমান উপাদান একে অপরকে বসতে হবে। উদাহরণস্বরূপ, এই ধারক তিন 100px প্রশস্ত
DIVএকটি 400px প্রশস্ত ধারক মধ্যে ভাসমান উপাদান।
আপনি একটি ফটো গ্যালারি বিন্যাস তৈরি করতে floats ব্যবহার করতে পারেন। আপনি প্রতিটি থাম্বনেল রাখুন (এটি একই আকারের যখন এটি সেরা কাজ করে) DIV ক্যাপশন এবং ভাসা সঙ্গে DIV ধারক উপাদান। ব্রাউজার উইন্ডো কত বিস্তৃত কোন ব্যাপার, থাম্বনেল অভিন্নভাবে লাইন আপ হবে।
ভাসা বন্ধ চালু
ফ্লোটের উপাদানটি কীভাবে পেতে হয় তা একবার জানার পরে, ফ্লোটটি বন্ধ করতে কীভাবে জানা দরকার তা গুরুত্বপূর্ণ। আপনি সিএসএস পরিষ্কার সম্পত্তি দিয়ে ভাসা বন্ধ। আপনি বাম floats, ডান floats বা উভয় পরিষ্কার করতে পারেন:
পরিষ্কার: বাম;পরিষ্কার: অধিকার;স্পষ্ট উভয়;
আপনি যে স্পষ্ট সম্পত্তিটি সেট করেন তার যেকোনো উপাদানটি সেই তলটির নীচে প্রদর্শিত হবে যা সেই দিকটি ভাসিয়ে দেয়। উদাহরণস্বরূপ, এই উদাহরণে পাঠ্যের প্রথম দুটি অনুচ্ছেদ সাফ করা হয় না, তবে তৃতীয়টি হল।
বিভিন্ন লেআউট প্রভাব পেতে আপনার নথির বিভিন্ন উপাদানের স্পষ্ট মূল্যের সাথে খেলুন। সবচেয়ে আকর্ষণীয় ভাসমান লেআউটগুলির মধ্যে একটি চিত্রের অনুচ্ছেদগুলির পাশে ডান বা বাম কলামের নিচে চিত্রগুলির একটি সিরিজ। চিত্রটি অতীত স্ক্রোল করার জন্য পাঠ্যটি যথেষ্ট দীর্ঘ নয়, এমনকি আপনি পূর্বের চিত্রের পরিবর্তে কলামে উপস্থিত থাকা নিশ্চিত করতে সমস্ত ছবিতে স্পষ্ট ব্যবহার করতে পারেন।
এইচটিএমএল (এই অনুচ্ছেদটি পুনরাবৃত্তি করুন):
আপনি এই মুহূর্তে অদলবদল করতে পারেন, কিন্তু আপনি কি করতে চান? কাজী নজরুল ইসলাম, মজুরি এবং অন্যান্য ম্যাগাজিন হিসাবে।
সিএসএস (বাম ছবিতে ভাসা):
img.float {float: left; পরিষ্কার: বাম; মার্জিন: 5px;}
এবং ডানদিকে:
img.float {float: right; স্পষ্ট: ডান; মার্জিন: 5px;}
লেআউট জন্য floats ব্যবহার করে
একবার বুঝতে পারছি কিভাবে ভাসা সম্পত্তি কাজ করে, আপনি আপনার ওয়েব পেজ layouts এটি ব্যবহার শুরু করতে পারেন। ভাসমান ওয়েব পৃষ্ঠা তৈরির জন্য আমি এই পদক্ষেপগুলি গ্রহণ করি:
- লেআউটটি ডিজাইন করুন (কাগজ বা গ্রাফিক্স সরঞ্জামে বা আমার মাথায়)।
- পাতা বিভাগ হতে যাচ্ছে তা নির্ধারণ করুন।
- বিভিন্ন পাত্রে এবং তাদের মধ্যে উপাদানগুলির প্রস্থ নির্ধারণ।
- সবকিছু ভাসা। এমনকি বহিঃস্থ কন্টেইনার উপাদানটি বাম দিকে ভাসানো হয় যাতে আমি জানি যে ব্রাউজার ভিউ পোর্টের সাথে এটি কোথায় থাকবে।
যতক্ষণ আপনি আপনার লেআউট বিভাগের প্রস্থ (শতাংশগুলি জরিমানা) জানেন, আপনি এটি ব্যবহার করতে পারেন ভাসা সম্পত্তি তাদের পাতা যেখানে তারা রাখা। এবং চমৎকার বিষয় হচ্ছে, ইন্টারনেট এক্সপ্লোরার বা ফায়ারফক্সের জন্য বক্স মডেলের সম্পর্কে আপনার যত বেশি চিন্তা করা হবে না।
