float: left; বনাম প্রদর্শন: ইনলাইন; বনাম প্রদর্শন: ইনলাইন-ব্লক; বনাম প্রদর্শন: টেবিল-ঘর;

Question

আমার প্রশ্নগুলো)

1. এই কোনও পদ্ধতি কি কোনও পেশাদার ওয়েব ডিজাইনার পছন্দ করেন?

2. ওয়েবসাইট আঁকার সময় এই কোনও পদ্ধতি কি কোনও ওয়েব ব্রাউজার দ্বারা পছন্দসই?

3. এগুলি কি কেবল ব্যক্তিগত পছন্দ?

4. আমি অনুপস্থিত অন্য কৌশল আছে?

দ্রষ্টব্য: উপরের প্রশ্নগুলি বহু-কলাম লেআউট ডিজাইনের ক্ষেত্রে are

---

float: left;

http://jsfiddle.net/CDe6a/

কলাম লেআউট তৈরি করার সময় আমি এই পদ্ধতিটি সর্বদা ব্যবহার করি এবং এটি ঠিক কাজ করে বলে মনে হয়। পিতা-মাতা যদিও নিজেই ধসে পড়ে, তাই আপনাকে clear:both;পরে এটির কথা মনে রাখা দরকার । আরেকটি কন যা আমি সন্ধান পেয়েছি তা হ'ল পাঠ্যটিকে উলম্বভাবে সারিবদ্ধ করতে অক্ষম।

প্রদর্শন: ইনলাইন;

এটি ভেঙে যাওয়া পিতামাতার সমস্যাটি সংশোধন করে বলে মনে হচ্ছে তবে শুকনো স্থান যুক্ত করে।

http://jsfiddle.net/CDe6a/1/

এইচটিএমএল থেকে হোয়াইটস্পেস সরিয়ে ফেলা এই সমস্যার সমাধানটিকে সহজতম বলে মনে হচ্ছে তবে আপনি যদি এইচটিএমএল সম্পর্কে সত্যই পিক হন তবে তা পছন্দসই নয়।

http://jsfiddle.net/CDe6a/2/

প্রদর্শন: ইনলাইন-ব্লক;

দেখে মনে হয় ঠিক তেমন আচরণ করে display:inline;।

http://jsfiddle.net/CDe6a/3/

প্রদর্শন: টেবিল-সেল;

http://jsfiddle.net/CDe6a/4/

নিখুঁত কাজ করে।

আমার চিন্তা:

আমি নিশ্চিত যে আমি এক টন স্টাফ মিস করছি, কিছু নির্দিষ্ট ব্যতিক্রম যেমন লেআউটটি ভেঙে দেবে তবে, display:table-cell;এটি সবচেয়ে ভাল কাজ করবে বলে মনে হয় এবং আমি মনে করি যে float:left;আমি সবসময় গণ্ডগোলের মতো বলে প্রতিস্থাপন শুরু করব clear:both;। আমি ওয়েবে এই সম্পর্কে অনেক নিবন্ধ এবং ব্লগ পড়েছি, কিন্তু তাদের কেউই আমার ওয়েবসাইটটি দেওয়ার সময় আমার কী ব্যবহার করা উচিত তার একটি নির্দিষ্ট উত্তর দেয় না।

Comments

এইচটিএমএল 5 বয়লারপ্লেট এবং টুইটার বুটস্ট্র্যাপে ছেলেরা কী ব্যবহার করে তা দেখুন এবং এটির সাথে

— লেগে থাকুন

সিএসএস-ট্রিক্সে স্পেস লড়াই করার বিষয়ে একটি দুর্দান্ত নিবন্ধ রয়েছে: css-tricks.com/fighting-the-space-between-inline- block

— লিয়া রোজমা

আমি display: inlineসম্পত্তিটি ব্যবহার করার চেষ্টা করেছি এবং আমি দেখতে পেয়েছি এটি সঠিকভাবে শিশুদের উপাদানগুলিতে প্যাডিংয়ের যত্ন নেয় না। তবে আমি যদি এটি ব্যবহার করি তবে এটি display: inline-blockস্বয়ংক্রিয়ভাবে যত্ন নেওয়া হবে। দয়া করে লিঙ্কটি দেখুন - codepen.io/prashdeep/pen/rVOyvd দয়া করে আমাকে আপনার ইনপুটগুলি একই জানতে দিন

— জিলকানু

Answer 1

আপনি যে বিকল্পগুলির বিষয়ে জিজ্ঞাসা করেছেন সেগুলির মধ্যে:

• float:left;
  ভাসাটি সাফ করার জন্য অতিরিক্ত মার্কআপ থাকা প্রয়োজন বলে আমি ভাসা পছন্দ করি না। যতদূর আমি উদ্বিগ্ন, পুরো floatধারণাটি সিএসএস স্পেসে খারাপভাবে ডিজাইন করা হয়েছিল। এটি সম্পর্কে এখনই আমরা কিছুই করতে পারি না। তবে গুরুত্বপূর্ণ বিষয়টি এটি কাজ করে এবং এটি সমস্ত ব্রাউজারে (এমনকি আই 6 /)) কাজ করে, তাই আপনি যদি এটি পছন্দ করেন তবে এটি ব্যবহার করুন।

আপনি যদি :afterফ্লোটগুলি সাফ করার জন্য নির্বাচককে ব্যবহার করেন তবে ক্লিয়ারিংয়ের জন্য অতিরিক্ত মার্কআপের প্রয়োজন হতে পারে না , তবে আপনি আই 6 বা আই 7 সমর্থন করতে চাইলে এটি কোনও বিকল্প নয়।

• display:inline;
  আইআই / / of ব্যতীত এটি বিন্যাসের জন্য ব্যবহার করা উচিত নয়, যেখানে display:inline; zoom:1ভাঙা সমর্থনের জন্য একটি ফ্যাল-ব্যাক হ্যাক inline-block।

• display:inline-block;
  এটি আমার প্রিয় বিকল্প। এটি আইআই / / for এর একটি সতর্কতার সাথে সমস্ত ব্রাউজার জুড়ে ভাল এবং ধারাবাহিকভাবে কাজ করে যা কিছু উপাদানগুলির জন্য এটি সমর্থন করে। তবে এর আশেপাশে কাজ করার হ্যাকি সমাধানের জন্য উপরে দেখুন।

অন্য বড় সাবধানতাটি inline-blockহ'ল ইনলাইন দিকের কারণে, উপাদানগুলির মধ্যে সাদা স্পেসগুলি পাঠ্যের শব্দের মধ্যে সাদা স্পেস হিসাবে সমান বিবেচনা করা হয়, যাতে আপনি উপাদানগুলির মধ্যে ফাঁক পেতে পারেন। এটির চারপাশে কাজ করার সুযোগ রয়েছে তবে তাদের মধ্যে কোনওটিই আদর্শ নয়। (উপাদানগুলির মধ্যে কোনও ফাঁক না রাখাই ভাল the

• display:table-cell;
  অন্য একটি যেখানে আপনার ব্রাউজারের সামঞ্জস্যের সমস্যা রয়েছে। পুরানো আইইগুলি এগুলি নিয়ে মোটেও কাজ করবে না। তবে অন্য ব্রাউজারগুলির জন্যও, এটি লক্ষণীয় যে এটির মতো table-cellউপাদানগুলির অভ্যন্তরে থাকার প্রেক্ষাপটে ব্যবহৃত হয়েছে tableএবং এটি স্টাইলযুক্ত table-row; table-cellবিচ্ছিন্নভাবে ব্যবহার করা এটি করার উদ্দেশ্যে করা উপায় নয়, তাই আপনি বিভিন্ন ব্রাউজারকে এটিকে অন্যরকম আচরণ করতে পারেন।

অন্যান্য কৌশল আপনি মিস করতে পারেন? হ্যাঁ.

• যেহেতু আপনি বলছেন এটি একটি বহু-কলাম লেআউটের জন্য, তাই একটি সিএসএস কলামের বৈশিষ্ট্য রয়েছে যা সম্পর্কে আপনি জানতে চাইতে পারেন। তবে এটি সর্বাধিক সমর্থিত বৈশিষ্ট্য নয় (এমনকি আইই 9 তে নয়, এবং অন্যান্য ব্রাউজারগুলির জন্য প্রয়োজনীয় একটি বিক্রেতা উপসর্গ দ্বারা সমর্থিত নয়), যাতে আপনি এটি ব্যবহার করতে নাও চান। তবে এটি অন্য একটি বিকল্প, এবং আপনি জিজ্ঞাসা করেছিলেন।

• সিএসএস ফ্লেক্সবক্স বৈশিষ্ট্যটিও রয়েছে, যা আপনাকে বাক্স থেকে বাক্সে পাঠ্য প্রবাহের অনুমতি দেবে। এটি একটি উত্তেজনাপূর্ণ বৈশিষ্ট্য যা কিছু জটিল লেআউটগুলিকে মঞ্জুরি দেয়, তবে এটি এখনও বিকাশে অনেক বেশি - দেখুন http://html5please.com/#flexbox

আশা করি এইটি কাজ করবে.

Comments

আপনার ভাসমান সাফ করার জন্য অতিরিক্ত মার্কআপের প্রয়োজন নেই, আমার উত্তরটি দেখুন।

— মিথ্যা রায়ান

সর্বাধিক দৃ response় প্রতিক্রিয়া = উত্তর।

— EGHDK

আমি সবসময় ব্যবহার করি inline-blockকারণ এটি এই ক্ষেত্রেগুলির জন্য ঠিক তৈরি।

— রাপলি অ্যান্ড্রেস

সাদা বর্ণমালা সরিয়ে ফেলার জন্য একটি ভাল পদ্ধতি: ইনলাইন-ব্লক তৈরি করে, আপনি ধারক উপাদানটিতে ফন্ট-আকারটি 0 এ সেট করতে পারেন, তারপরে ইনলাইন উপাদানগুলির জন্য পছন্দসইটি সেট করতে পারেন। এটি এইচটিএমএলে সাদা স্থান অপসারণের প্রয়োজন এড়াতে পারে

— অ্যালেক্সমোরলি-ফিঞ্চ

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

— স্পুদলি

Answer 2

সঙ্কুচিত পিতামাতার সমস্যাটি সমাধান করার জন্য আমি সাধারণত ব্যবহার করি float: left;এবং যুক্ত করি (এটি কেন কাজ করে তা এই হিসাবে স্ক্রোলবারগুলি যুক্ত করার পরিবর্তে পিতামাতাকে প্রসারিত করবে যদি আপনি এটিকে সুস্পষ্ট উচ্চতা না দেন তবে পাশাপাশি কাজ করে)। আমার বেশিরভাগ উল্লম্ব প্রান্তিককরণের প্রয়োজনগুলি মেনু বারগুলিতে এক লাইনের পাঠ্যের জন্য ছিল , যা সম্পত্তি ব্যবহার করে সমাধান করা যেতে পারে । যদি আমাকে সত্যিই কোনও ব্লক উপাদানটিকে উল্লম্বভাবে প্রান্তিককরণের প্রয়োজন হয় তবে আমি পিতামাতার উপর উল্লম্বভাবে প্রান্তিকভাবে সাজানো আইটেম, অবস্থান নিখুঁত, শীর্ষ 50% এবং নেতিবাচক মার্জিনের উপর একটি সুস্পষ্ট উচ্চতা সেট করতাম।overflow: auto;overflow: autooverflow: hiddenline-height

আপনার ব্যবহারকারীর display: table-cellপক্ষে সাইটের প্রস্থের চেয়ে বেশি আইটেম থাকার সময় এটি যেভাবে উপচে পড়বে তা আমি ব্যবহার না করার কারণ । টেবিল-সেল ব্যবহারকারীকে অনুভূমিকভাবে স্ক্রোল করতে বাধ্য করবে, যখন ফ্লোটগুলি ওভারফ্লো মেনুটিকে আবৃত করবে, এটি অনুভূমিক স্ক্রোলিংয়ের প্রয়োজন ছাড়াই এখনও ব্যবহারযোগ্য করে তুলবে।

ভাসা সম্পর্কে সর্বোত্তম জিনিস: বাম এবং ওভারফ্লো: অটো হ'ল এটি হ্যাক ছাড়াই আইআই 6 এর সমস্ত পথে কাজ করে, সম্ভবত আরও পরে।

Comments

এই দুর্দান্ত পয়েন্টটি, অনেক জনপ্রিয় টিউটোরিয়ালে উল্লিখিত হয়নি। দু'পক্ষের প্রশ্ন: এটি কি আসলে বিভিন্ন ব্রাউজারে পরীক্ষা করা হয়? নাভি এবং সামগ্রী হিসাবে দুটি ব্লকের মধ্যে বিভাজক আঁকতে আপনার পছন্দ করার পদ্ধতিটি কী? আমি জিজ্ঞাসার কারণটি হ'ল যদি উপরের ডিভগুলি আলাদা উচ্চতার হয় তবে এটি কঠিন হবে।

— শীতল শাহ

@ শীতলশাহ: আপনি "এটি" দ্বারা আপনি কী বোঝাতে চাইছেন তা আমি নিশ্চিত নই, তবে আমি অগণিত অনুভূমিক মেনুটি প্রয়োগ করেছি এবং ভাসমান বাম এবং ওভারফ্লো আইএমও বিভিন্ন ব্রাউজারে অনুভূমিক মেনু বাস্তবায়নের সবচেয়ে পরিষ্কার এবং সবচেয়ে নির্ভরযোগ্য উপায়, পুরানো এবং নতুন। বিভাজক যুক্ত করার জন্য, আমি সাধারণত বাম সীমানা (বা ফ্যানসিয়ার বিভাজকগুলির জন্য ব্যাকগ্রাউন্ড চিত্রগুলি ব্যবহার করি, যদি আপনাকে পুরানো ব্রাউজারটির যত্ন নেওয়া প্রয়োজন না হয় তবে আপনি CSS3 বর্ডার-চিত্রও ব্যবহার করতে পারেন)। আপনি উচ্চতা পৃথক করে কী বোঝাতে চেয়েছেন তা আমি পুরোপুরি বুঝতে পারছি না, আরও ব্যাখ্যা করতে চাই বা একটি ফিডাল যুক্ত করতে চাই?

— মিথ্যা রায়ান

এটি ক্লিয়ারিং সম্পর্কে অনেক কিছুই সাফ করেছে এবং আমি জানতাম না যে ওভারফ্লো এটি করতে পারে। আমি অভ্যস্ত: পদ্ধতির পরে যেখানে আপনি কোনও সামগ্রী যুক্ত করেন: "।" এবং দৃশ্যমানতা: লুকানো। এর জন্য ধন্যবাদ

— নিলস_ই

Answer 3

আমি বলব এটি আপনার প্রয়োজনের উপর নির্ভর করে:

1. আপনার যদি কেবল 3 টি কলাম লেআউট পেতে এটির প্রয়োজন হয় তবে আমি এটি দিয়ে পরামর্শ দেব float।

2. আপনার যদি মেনুটির প্রয়োজন হয় তবে আপনি এটি ব্যবহার করতে পারেন inline-block। শ্বেতস্থান সমস্যার জন্য, আপনি এখানে ক্রিস কোয়ারের বর্ণিত কয়েকটি কৌশল ব্যবহার করতে পারেন http://css-tricks.com/fighting-the-space-between-inline- block-eferences/ ।

3. যদি আপনাকে একাধিক পছন্দসই বিকল্প তৈরি করতে হয়, যা প্রস্থটি নির্দিষ্ট বক্সের মধ্যে সমানভাবে ছড়িয়ে পড়ে, তবে আমি পছন্দ করব display: table । এটি কিছু ব্রাউজারগুলিতে সঠিকভাবে কাজ করবে না, তাই এটি আপনার ব্রাউজার সমর্থনের উপর নির্ভর করে।

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

Comments

ক্রিস কোয়েরের নিবন্ধটির লিঙ্কের জন্য +1। YUI এর খাঁটি সিএসএস গ্রিডগুলি যে পদ্ধতি ব্যবহার করে তার তালিকার একটি যোগ হ'ল

— ওয়েব_ডিজাইনার

Answer 4

আমি ইনলাইন-ব্লক পছন্দ করি, যদিও ভাসাটিও দরকারী। টেবিল-সেল পুরানো আইইগুলি দ্বারা সঠিকভাবে রেন্ডার করা হয় না (কোনওটিই ইনলাইন-ব্লক করে না, তবে হ্যাকটিও zoom: 1; *display: inlineআমি প্রায়শই ব্যবহার করি)। আপনার যদি বাচ্চাদের মা বাবার চেয়ে ছোট উচ্চতা থাকে তবে ভাসমানগুলি এগুলিকে শীর্ষে এনে দেবে, অন্যদিকে ইনলাইন-ব্লকটি কখনও কখনও স্ক্রু হয়ে যায়।

বেশিরভাগ সময়, ব্রাউজার অবশ্যই সমস্ত কিছু সঠিকভাবে ব্যাখ্যা করবে, যদি না এটি অবশ্যই আইই না হয়। আই আই চুষতে না পারে তা নিশ্চিত করতে আপনাকে সর্বদা পরীক্ষা করে দেখতে হবে - উদাহরণস্বরূপ, টেবিল-সেল ধারণা।

সমস্ত বাস্তবে, হ্যাঁ, এটি ব্যক্তিগত পছন্দের দিকে ফোটে।

সাদা স্থান থেকে মুক্তি পাওয়ার জন্য যে কৌশলটি আপনি ব্যবহার করতে পারেন তা font-sizeহ'ল পিতামাতার কাছে 0 এর একটি সেট সেট করা , তারপরে font-sizeবাচ্চাদের পিছনে ফিরিয়ে দিন, যদিও এটি একটি ঝামেলা এবং স্থূল।

Comments

যদি "আপনাকে সর্বদা এটি পরীক্ষা করতে হবে যে আই আই চুষছে না" তবে আপনি সর্বদা হতাশ হবেন। Hehe। (অন্যদিকে, তিনি এ

— কথাটি

Answer 5

কেবল রেকর্ডের জন্য, স্পুডলির উত্তরে যুক্ত করার জন্য, position: absoluteকলামের প্রস্থগুলি আপনি যদি জানেন তবে এটির ব্যবহার এবং মার্জিনেরও সম্ভাবনা রয়েছে ।

আমার জন্য, কোনও পদ্ধতি বেছে নেওয়ার ক্ষেত্রে প্রধান সমস্যাটি হ'ল পুরো উচ্চতা (সমান উচ্চতা) পূরণ করার জন্য আপনার কলামগুলির প্রয়োজন কিনা, যেখানে টেবিল-সেলটি সহজতম পদ্ধতি (যদি আপনি পুরানো ব্রাউজারগুলির জন্য বেশি যত্ন না পান)।

Answer 6

আমি পছন্দ inline-block, কিন্তুfloat এখনও এইচটিএমএল এলিমেট একসাথে রাখার দরকারী উপায়, বিশেষত যখন আমাদের এমন উপাদান থাকে যা একটি বাম দিকে এবং একটি ডানদিকে আটকে থাকে, কম লাইন লেখার সাথে আরও ভালভাবে কাজ করে, অন্য অনেক ক্ষেত্রে ইনলাইন-ব্লক ভালভাবে কাজ করে ।