সাধারণত, যখন আমরা একনাগারে একাধিক থাকতে চাই DIVsআমরা ব্যবহার float: leftকরতাম তবে এখন আমি এর কৌশলটি আবিষ্কার করেছিdisplay:inline-block
উদাহরণ এখানে লিঙ্ক । এটি আমার কাছে মনে হয় যে display:inline-blockএটি align DIVsসারিবদ্ধভাবে যাওয়ার আরও ভাল উপায় তবে কোনও ত্রুটি আছে কি? কৌশলটি কেন এই কৌশলটি কম জনপ্রিয় float?
উত্তর:
3 কথায়: inline-blockভাল।
ইনলাইন ব্লক
display: inline-blockপদ্ধতির একমাত্র ত্রুটি এটি হ'ল আই 7 এবং এর নীচে কোনও উপাদান কেবল তখনই প্রদর্শিত হয় inline-blockযদি এটি inlineডিফল্টরূপে ইতিমধ্যে ছিল । এর অর্থ কী এটি হল যে কোনও <div>উপাদান ব্যবহার করার পরিবর্তে আপনাকে একটি <span>উপাদান ব্যবহার করতে হবে । এটি মোটেও একটি বিশাল অসুবিধা নয় কারণ শব্দার্থকভাবে <div>পৃষ্ঠাটি বিভাজনের জন্য একটি যখন <span>কেবল একটি পৃষ্ঠার স্প্যানটি coveringেকে রাখার জন্য, তাই এর মধ্যে বিশাল অর্থগত পার্থক্য নেই। এক বিশাল সুবিধা display:inline-blockযে যখন অন্যান্য বিকাশকারীদের পরবর্তী সময়ে আপনার কোড বজায় রাখার হয়, তাই অনেক বেশি সুস্পষ্ট কি হয় display:inline-blockএবং text-align:right একটি তুলনায় সাধন করার চেষ্টা করা হয় float:leftবা float:rightবিবৃতি। আমার প্রিয় সুবিধা inline-blockপদ্ধতির এটি ব্যবহার করা সহজ হয় vertical-align: middle, line-heightএবংtext-align: centerউপাদানকে পুরোপুরি কেন্দ্র করার জন্য, এমনভাবে যা স্বজ্ঞাত। আমি মোজিলা ব্লগে ক্রস ব্রাউজার ইনলাইন-ব্লক কীভাবে প্রয়োগ করতে পারি তার একটি দুর্দান্ত ব্লগ পোস্ট পেয়েছি । এখানে ব্রাউজারের সামঞ্জস্য রয়েছে ।
ভাসা
কারণ ব্যবহার floatপদ্ধতি আপনার পৃষ্ঠার লেআউট জন্য উপযুক্ত নয় কারণ হল floatCSS এর সম্পত্তি মূলত শুধুমাত্র জন্যই ছিল একটি চিত্র (পত্রিকা শৈলী) চারপাশে পাঠ্য মোড়ানো আছে এবং নকশা দ্বারা,, না সেরা সাধারণ পৃষ্ঠার লেআউট উদ্দেশ্যে উপযুক্ত। পরে ভাসমান উপাদানগুলি পরিবর্তন করার সময়, কখনও কখনও আপনার পজিশনিং সমস্যা থাকে কারণ তারা পৃষ্ঠা প্রবাহে নেই । আরেকটি অসুবিধা হ'ল এটির জন্য সাধারণত একটি ক্লিয়ারফিক্সের প্রয়োজন হয় অন্যথায় এটি পৃষ্ঠার দিকগুলি ভেঙে দিতে পারে। ক্লিয়ারফিক্সের জন্য তাদের পিতামাতাকে তাদের চারপাশে ভেঙে ফেলা বন্ধ করার জন্য একটি উপাদান যুক্ত করা প্রয়োজন যা সামগ্রী থেকে পৃথক শৈলীর মধ্যে শব্দার্থক রেখাটি অতিক্রম করে এবং এটি ওয়েব বিকাশে একটি বিরোধী-নিদর্শন ।
উপরের লিঙ্কে উল্লিখিত যে কোনও সাদা স্থানের সমস্যাগুলি white-spaceসিএসএস সম্পত্তি সহ সহজেই ঠিক করা যেতে পারে ।
সাইটপয়েন্টটি ওয়েব ডিজাইন পরামর্শের জন্য খুব বিশ্বাসযোগ্য উত্স এবং তাদের মতামত আমার মত হয় বলে মনে হয়:
আপনি যদি সিএসএস লেআউটে নতুন হন তবে আপনাকে সিএসএসকে কল্পনামূলক উপায়ে ব্যবহার করা দক্ষতার উচ্চতা বলে ভেবে ক্ষমা হতে হবে। আপনি যতগুলি সিএসএস লেআউট টিউটোরিয়াল সন্ধান করতে পারেন সেগুলি গ্রাস করে থাকলে আপনি ধরে নিতে পারেন যে মাস্টারিং ফ্লোটগুলি উত্তীর্ণের একটি অনুষ্ঠান। জটিলতা দেখে আপনি চমকে উঠবেন এবং আপনি শেষ পর্যন্ত কীভাবে কাজ করবেন তা বুঝতে পারলে আপনি কৃতিত্বের উপলব্ধি অর্জন করতে পারবেন।
বোকা বানাবেন না। আপনি ব্রেইন ওয়াশ হচ্ছে।
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
2015 আপডেট - আধুনিক ব্রাউজারগুলির জন্য ফ্লেক্সবক্স একটি ভাল বিকল্প :
.container {
display: flex; /* or inline-flex */
}
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}21 ডিসেম্বর, 2016 আপডেট
বুটস্ট্র্যাপ 4 আই 9-র জন্য সমর্থন সরিয়ে দিচ্ছে এবং এভাবে সারিগুলি থেকে ভাসা থেকে মুক্তি পাচ্ছে এবং পুরো ফ্লেক্সবক্সে যাচ্ছে।
white-spaceসম্পত্তি উল্লেখ - আপনি এই ব্যাখ্যা করতে পারেন?
letter-spacingঅন্য কোথাও কাস্টমাইজ হওয়ার ঘটনা ঘটে তবে তা ভাঙ্গবে না ।
যদিও আমি একমত যে সাধারণভাবে inline-blockআরও ভাল, আপনি যদি একটি প্রতিক্রিয়াশীল গ্রিড তৈরির জন্য শতকরা প্রস্থগুলি ব্যবহার করেন (বা আপনি পিক্সেল-নিখুঁত প্রস্থগুলি চান) তবে আরও একটি বিষয় বিবেচনায় নেওয়ার দরকার রয়েছে :
আপনি যদি inline-blockগ্রিডের জন্য ব্যবহার করছেন যা মোট 100% বা প্রায় 100% প্রস্থের কাছাকাছি রয়েছে, আপনাকে অবশ্যই নিশ্চিত করতে হবে যে আপনার এইচটিএমএল মার্কআপে কলামগুলির মধ্যে কোনও সাদা স্থান নেই ।
ফ্লোটাস সহ, এটি আপনার চিন্তার দরকার এমন কিছু নয় - কলামগুলি কোনও সাদা স্থান বা কলামগুলির মধ্যে থাকা অন্যান্য সামগ্রী জুড়ে ভাসমান। এই কোডটির উত্তরগুলিকে কুৎসিত না করে এইচটিএমএল হোয়াইটস্পেস সরিয়ে ফেলার উপায় সম্পর্কে এই প্রশ্নের উত্তরের কয়েকটি ভাল পরামর্শ রয়েছে ।
যদি কোনও কারণে আপনি এইচটিএমএল মার্কআপ নিয়ন্ত্রণ করতে না পারেন (যেমন একটি সীমাবদ্ধ প্রতিরোধকারী সিএমএস), আপনি এখানে বর্ণিত কৌশলগুলি চেষ্টা করতে পারেন, বা আপনাকে ইনলাইন-ব্লকের পরিবর্তে আপস করতে হবে এবং ফ্লোটগুলি ব্যবহার করতে হবে। এমন কুরুচিপূর্ণ সিএসএস কৌশলও রয়েছে যা কেবলমাত্র চরম পরিস্থিতিতে ব্যবহার করা উচিত, যেমন font-size:0;কলামের ধারক হিসাবে তারপরে প্রতিটি কলামের মধ্যে ফন্টের আকার পুনরায় প্রয়োগ করতে হবে ।
উদাহরণ স্বরূপ:
float: left । এটি "কেবলমাত্র কাজ করে" (তবে মোড়ক পরিষ্কার করার জন্য প্রয়োজন)।inline-block । ব্লকগুলির মধ্যে শ্বেতস্পেস একটি স্থির-প্রস্থের স্থান তৈরি করে যা লেআউটটি ভেঙে এবং শেষ কলামটি একটি লাইন নামিয়ে দেয় যার ফলে মোট প্রস্থটি 100% ছাড়িয়ে যায়।inline-blockএইচটিএমএলে কলামগুলির মধ্যে নেই এবং কোনও সাদা জায়গা নেই । এটি আবার "কেবলমাত্র কাজ করে" - তবে এইচটিএমএলটি আরও কৃপণ এবং আপনার সিএমএস এটির এইচটিএমএল আউটপুটটিতে কিছুটা প্রিটিফিকেশন বা ইনডেন্টিং বাধ্য করতে পারে যা বাস্তবে এটি অর্জন করা কঠিন করে তোলে।div+(whitespace) {display:none}বা কিছু?
<div class="inlinething">hi</div> <div class="inlinething">there</div> more content here... ?)
আপনি যদি divপিক্সেলটি সঠিকভাবে সারিবদ্ধ করতে চান তবে ভাসা ব্যবহার করুন। inline-blockআপনাকে সর্বদা কয়েকটি পিক্সেল কাটা উচিত বলে মনে হচ্ছে (কমপক্ষে আইই তে)
* {padding:0px; margin:0px; }কারণ এটি আমার কোডিংয়ের ভারসাম্য বজায় রাখতে সহায়তা করে
ইনলাইন-ব্লক সম্পর্কে একটি বৈশিষ্ট্য রয়েছে যা যদিও সরাসরি-সামনের দিকে নাও থাকতে পারে। এটি সিএসএসে উল্লম্ব-সারিবদ্ধের জন্য ডিফল্ট মান হ'ল বেসলাইন। এটি কিছু অপ্রত্যাশিত সারিবদ্ধ আচরণের কারণ হতে পারে। এই নিবন্ধটি দেখুন।
http://www.brunildo.org/test/inline-block.html
পরিবর্তে, যখন আপনি একটি ভাসা করবেন: বাম, ডিভগুলি একে অপরের থেকে স্বতন্ত্র এবং আপনি সহজেই মার্জিন ব্যবহার করে এগুলি সারিবদ্ধ করতে পারেন।
inline, নাinline-block। তবে সম্পর্কিত প্রথমটি ভাল: stackoverflow.com/a/11823622/918414