example - html computer code




ভাসা: বামে; বনাম প্রদর্শন: ইনলাইন; বনাম প্রদর্শন: ইনলাইন ব্লক; বনাম প্রদর্শন: টেবিল সেল; (4)

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

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

  2. ওয়েবসাইট অঙ্কন যখন এই পদ্ধতির একটি ওয়েব ব্রাউজার দ্বারা prefereed হয়?

  3. এই সব শুধু ব্যক্তিগত পছন্দ?

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

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

ভাসা: বামে;

http://jsfiddle.net/CDe6a/

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

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

এই ধোঁকাবাজ পিতামাতার সমস্যা সঠিক বলে মনে হচ্ছে, কিন্তু হোয়াইটস্পেস যোগ করে।

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

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

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

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

display:inline; মত ঠিক আচরণ আচরণ করা হয় display:inline;

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

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

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

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

আমার চিন্তা:

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


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


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

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

সব বাস্তবতা, হ্যাঁ, এটা ব্যক্তিগত পছন্দ নিচে boils।

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


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

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

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


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

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





css-float