এই ইনলাইন-ব্লক উপাদানটিকে নীচের দিকে কেন ঠেলে দেওয়া হচ্ছে?

Question

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

এবং আমি জানি যে এটির ওভারফ্লো: লুকানো যা এটি ঘটাচ্ছে তবে নিশ্চিত নয় যে এটি কেন এই ডিভিশনটিকে নীচে দিকে ঠেলে দিচ্ছে।

body {
  width: 350px;
  margin: 0px auto;
}

#container {
  border: 15px solid orange;
}

#firstDiv {
  border: 10px solid brown;
  display: inline-block;
  width: 70px;
  overflow: hidden;
}

#secondDiv {
  border: 10px solid skyblue;
  float: left;
  width: 70px;
}

#thirdDiv {
  display: inline-block;
  border: 5px solid yellowgreen;
}

<div id="container">
  <div id="firstDiv">FIRST</div>
  <div id="secondDiv">SECOND</div>
  <div id="thirdDiv">THIRD
    <br>some more content<br> some more content
  </div>
</div>

http://jsfiddle.net/WGCyu/ ।

Answer 1

মূলত আপনি আপনার কোডে আরও বিশৃঙ্খলা যুক্ত করেছেন যা আরও বিভ্রান্তি তৈরি করছে তাই প্রথমে আমি এমন বিশৃঙ্খলা অপসারণের চেষ্টা করব যা আসল বিষয়টি বুঝতে বাধা দেয়।

সবার আগে আমাদের প্রতিষ্ঠিত করতে হবে আসল প্রশ্নটি কী? এই কারণেই inline-blockউপাদানটিকে নীচের দিকে ধাক্কা দেওয়া হয়।

এখন আমরা এটি বুঝতে শুরু করি এবং প্রথমে বিশৃঙ্খলা অপসারণ করি।

1 - কেন তিনটি ডিভ একই সীমানা প্রস্থ দেবেন না? যাক এটা দিন।

2 - ভাসমান উপাদানটির কি ইনলাইন-ব্লক উপাদানটিকে নীচের দিকে ঠেলে দেওয়ার সাথে কোনও সংযোগ রয়েছে? না, এর সাথে কিছু করার নেই।

সুতরাং, আমরা সম্পূর্ণরূপে এই ডিভ অপসারণ করেছি । এবং আপনি ইনলাইন-ব্লক উপাদানটিকে নীচের দিকে ঠেলে দেওয়া একই আচরণের সাক্ষ্য দিচ্ছেন।

লাইন বাক্সগুলির ধারণাটি উপলব্ধি করার জন্য এখানে কিছু সাহিত্যের পালা আসবে এবং কীভাবে তারা একই লাইনে রেখাযুক্ত হয় esp গত সাবধানে সাবধানে পড়ুন কারণ আপনার প্রশ্নের উত্তর রয়েছে of

একটি 'ইনলাইন-ব্লক' এর বেসলাইনটি স্বাভাবিক প্রবাহে এটির শেষ লাইন বাক্সের বেসলাইন হয়, যদি না এটির ইন-ফ্লো লাইন বাক্স না থাকে বা যদি এর 'ওভারফ্লো' সম্পত্তিটির 'দৃশ্যমান' ব্যতীত অন্য কোনও গণিত মান থাকে না কোন ক্ষেত্রে বেসলাইনটি নীচের প্রান্তিক প্রান্ত।

আপনি যদি বেসলাইন সম্পর্কে নিশ্চিত না হন তবে এখানে সহজ কথায় সংক্ষিপ্ত বিবরণ দেওয়া হল।

'Gjpqy' ব্যতীত সমস্ত অক্ষর বেসলাইনটিতে রচিত হয় আপনি বেসলাইনটি সম্পর্কে ভাবতে পারেন যেমন আপনি এই "এলোমেলো অক্ষর" এর নীচে আন্ডারলাইন করার মতো একটি সরল অনুভূমিক রেখা আঁকেন তবে এটি বেসলাইন হবে তবে এখন আপনি যদি 'gjpqy' লিখেন তবে একই লাইনে অক্ষর (গুলি) তখন এই অক্ষরের নীচের অংশটি রেখার নীচে নেমে আসত।

সুতরাং, আমরা বলতে পারি যে 'gjpqy' ব্যতীত সমস্ত অক্ষর বেসলাইনটির উপরে সম্পূর্ণ লেখা থাকে এবং এই অক্ষরের কিছু অংশ বেসলাইনের নীচে লেখা থাকে।

3 - কেন আমাদের লাইনের বেসলাইনটি পরীক্ষা করা যায় না? আমি কয়েকটি অক্ষর যুক্ত করেছি যা আমাদের লাইনের বেসলাইনটি দেখায় ।

4 - ডিভের বেসলাইনগুলি খুঁজতে আমাদের ডিভগুলিতেও কিছু অক্ষর যুক্ত করবেন না কেন? এখানে, বেসলাইনটি স্পষ্ট করতে কিছু অক্ষর ডিভগুলিতে যুক্ত করা হয়েছে ।

এখন আপনি যখন বেসলাইন সম্পর্কে বুঝতে পারবেন, ইনলাইন-ব্লকগুলির বেসলাইন সম্পর্কে নিম্নলিখিত সরলীকৃত সংস্করণটি পড়ুন।

i) যদি প্রশ্নের ইনলাইন-ব্লকটির ওভারফ্লো সম্পত্তিটি দৃশ্যমান হিসাবে সেট করা থাকে (যা ডিফল্টরূপে তাই সেট করার দরকার নেই)। তারপরে এর বেসলাইনটি হবে লাইনের ধারণকৃত ব্লকের বেসলাইন।

ii) যদি প্রশ্নটিতে ইনলাইন-ব্লকটির ওভারফ্লো সম্পত্তিটি দৃশ্যমান থেকে অন্যটিতে সেট করা থাকে। তারপরে নীচের মার্জিনটি বাক্সযুক্ত রেখার বেসলাইনটিতে থাকবে।

• বিস্তারিত প্রথম পয়েন্ট

এখন এই তাকান আবার আপনার ধারণা যে কি সবুজ DIV আছে সঙ্গে ঘটছে নির্মল । এখনও যদি কোনও বিভ্রান্তি থাকে তবে ধারণকৃত ব্লকের বেসলাইনটি স্থাপন করতে এখানে সবুজ ডিভের আরও বেশি অক্ষর যুক্ত করা হয়েছে এবং সবুজ ডিভ বেসলাইনটি সারিবদ্ধ করা হয়েছে।

ঠিক আছে, আমি এখন দাবি করছি যে তাদের একই বেসলাইন আছে? ঠিক আছে?

5 - তাহলে কেন সেগুলি ওভারল্যাপ করে দেখবেন না যে তারা একে অপরের উপর উপযুক্ত? সুতরাং, আমি তৃতীয় ডিভ-বাম: 35px আনছি; তাদের এখন একই বেসলাইন আছে কিনা তা পরীক্ষা করতে ?

এখন, আমরা আমাদের প্রথম পয়েন্ট প্রমাণিত হয়েছে।

• বিস্তারিত দ্বিতীয় পয়েন্ট

ঠিক আছে, প্রথম পয়েন্টের দ্বিতীয় পয়েন্টের ব্যাখ্যার পরে সহজে হজমযোগ্য এবং আপনি দেখতে পাচ্ছেন যে প্রথম ডিভের ওভারফ্লো প্রপার্টি দৃশ্যমান (লুকানো) ব্যতীত অন্যটিতে সেট করা আছে যার রেখার বেস লাইনের নীচের প্রান্ত রয়েছে।

এটি আরও চিত্রিত করার জন্য এখন আপনি কয়েকটি পরীক্ষা-নিরীক্ষা করতে পারেন।

1. প্রথম ডিভ ওভারফ্লো সেট করুন : দৃশ্যমান (বা এটি পুরোপুরি অপসারণ) ।
2. দ্বিতীয় ডিভ ওভারফ্লো সেট করুন : দৃশ্যমান ব্যতীত অন্য ।
3. উভয় ডিভস ওভারফ্লো সেট করুন : দৃশ্যমান ব্যতীত অন্য ।

এখন আপনার বিশৃঙ্খলা ফিরিয়ে আনুন এবং দেখুন যে আপনার কাছে সবকিছু ঠিক আছে।

1. আপনার ভাসমান ডিভ ফিরিয়ে আনুন (অবশ্যই
   শরীরের কিছু প্রস্থ বাড়ানোর দরকার আছে ) আপনি দেখেন এর কোনও প্রভাব নেই।
2. একই বিজোড় মার্জিনগুলি ফিরিয়ে আনুন ।
3. ওভারফ্লোতে সবুজ ডিভ সেট করুন : আপনি আপনার প্রশ্নে সেট করার মতো দৃশ্যমান (যে মিসালাইনমেন্ট সীমানা প্রস্থকে 1px থেকে 5px এ বৃদ্ধি করার কারণে হয় তাই যদি নেতিবাচক বামে সামঞ্জস্য করেন তবে কোনও সমস্যা নেই)
4. এখন অতিরিক্ত অক্ষর আমি বুঝতে এইড যোগ করা অপসারণ । (এবং অবশ্যই নেতিবাচক বাম অপসারণ)
5. অবশেষে শরীরের প্রস্থ হ্রাস করুন কারণ আমাদের আর বৃহত্তর আর প্রয়োজন নেই।

এবং এখন আমরা যেখানে থেকে শুরু করেছি সেখানে ফিরে এসেছি।

আশা করি আমি আপনার প্রশ্নের উত্তর দিয়েছি।

Comments

এত বড় ব্যাখ্যার জন্য ধন্যবাদ তবে আমি আপনার পয়েন্টটি পাইনি "তারপরে এর বেসলাইনটি লাইনের ধারণকৃত ব্লকের বেসলাইন হবে" " আপনি কি দ্বিতীয় পয়েন্টে পরিষ্কার করে দিয়েছিলেন এটি লাইনটির বেসলাইন সমান?

— শন টেলর

বিলম্ববিত প্রতিক্রিয়া. আমি ঠিক একই সমস্যাটি উল্লেখ করেছি এবং এনআইসির ব্যাখ্যার জন্য আমি গ্যারি লিন্ডালকে ধন্যবাদ জানাতে চাই।

— টিমএসপিকিউআর

+1 এনটিজিক্লিয়েনার যদিও আমি ভাল উত্তরগুলির প্রশংসা করি, গ্যারি লিন্ডাল পড়তে অনেক বেশি এবং আমি কেবলমাত্র কয়েকটি লাইন মিস করছি যেখানে এটি বলেছে 'সমাধান: এক্সওয়াই'

— বেসিক কোডার

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

— jonsanders101

@ntgCleaner ধন্যবাদ মানুষ .. সমস্ত ব্যাখ্যা দেওয়ার পরেও আমি এটি কাজ করতে পারি নি। তবে আপনার মন্তব্যটি এটি করেছে :)

— সুপারসান

Answer 2

সিএসএসে ডিফল্ট মান vertical-alignহ'ল baselineএই নিয়মটি inline-blockএই http://www.brunildo.org/test/inline- block.html পড়ার সাথেও প্রযোজ্য

vertical-align:topআপনার inline-blockডিআইভিতে লিখুন ।

এই http://jsfiddle.net/WGCyu/1/ দেখুন

Comments

আপনি আমার প্রশ্ন পড়েছেন? আমি কখনও সমস্যার সংশোধন করতে বলিনি।

— শন টেলর

@ শ্যাশনটাইলার: প্রশ্নের শিরোনামটি খুব বিভ্রান্তিকর। আমরা সহজাতভাবে শিরোনামটি পড়ি তারপরে কোডের জন্য অঙ্কিত করুন, যদি কোনও থাকে। আমরা খুব কমই আসল লেখাটি পড়ি। এটি একটি খারাপ অভ্যাস তবে এটি কেন হয় তা আপনার সম্ভবত বুঝতে হবে। : পি

— পুরাগ

@ সন্দীপ: আপনার সম্পাদনা সম্পর্কে, তাহলে উল্লম্ব-সারিবদ্ধকরণ অপসারণ করা

— শন টেলর

@sandeep: লিঙ্ক আপনার দেওয়া তথ্যপূর্ণ, কিন্তু এটা যেহেতু এটি আচরণকে বর্ণনা না এই প্রশ্নে সাহায্য না display:inline-blockসঙ্গে মিলিত float:left/right।

— জেটা

পছন্দ করুন যদি কেউ কোনও খারাপ উত্তর পোস্ট করে তবে ভবিষ্যতের দর্শকদের কাছে তাদের ভাল উদ্দেশ্য নির্বিশেষে কিছু ভুল আছে তা সিগন্যালের জন্য এটি ডাউনটিভেটেড হওয়ার যোগ্য। এটি বলেছিল, আমি মনে করি না যে এই উত্তরটি কখনই ডাউনটাউটের যোগ্য ছিল; এমনকি এটির আসল আকারে, এটি ধাঁধাটির মূল অংশটি স্বীকৃত উত্তর দ্বারা বাদ দিয়েছিল - যে বেসলাইন প্রান্তিককরণটি এককভাবে উপাদানগুলি উল্লম্বভাবে সারিবদ্ধ হয় না এবং আপনি যদি vertical-alignসম্পত্তি পরিবর্তন করেন তবে বর্ণিত জটিলতার কোনওটিই নয় গৃহীত উত্তর প্রযোজ্য।

— মার্ক আমেরিকা

Answer 3

শুধু ব্যবহার vertical-align:top;

ডেমো

Answer 4

দেখুন এই বিকল্প উদাহরণ। এই জাতীয় আচরণের কারণটি CSS3 মডিউলটিতে বর্ণিত হয়েছে : লাইন: 3.2। লাইন বক্স মোড়ানো [1] :

সাধারণভাবে, একটি লাইন বাক্সের প্রারম্ভটি তার ধারণকৃত ব্লকের প্রারম্ভটি স্পর্শ করে এবং প্রান্তটি এটিযুক্ত ব্লকের শেষ প্রান্তকে স্পর্শ করে। যাইহোক, ভাসমান বাক্সগুলি সমেত ব্লক প্রান্ত এবং লাইন বক্স প্রান্তের মধ্যে আসতে পারে। সুতরাং, একই ইনলাইন বিন্যাস প্রসঙ্গে লাইনের বাক্সগুলিতে সাধারণত একই ইনলাইন অগ্রগতি অগ্রসর (ধারণকারী ব্লকের) থাকে তবে ভাসমানগুলির কারণে ইনলাইন-অগ্রগতির স্থান হ্রাস পেলে তারা ভিন্ন হতে পারে [...]

আপনি দেখতে পাচ্ছেন, তৃতীয় উপাদানটি নীচে দিকে ধাক্কা দেওয়া হচ্ছে, যদিও এর কোনও overflowসম্পত্তি নেই। কারণটি অন্য কোথাও খুঁজে পেতে হবে। আপনি যে দ্বিতীয় আচরণটি লক্ষ্য করেছেন তা ক্যাসকেডিং স্টাইল শীট স্তর 2 সংশোধনী 1 (সিএসএস 2.1) তে বর্ণিত হয়েছে সুনির্দিষ্টতা: 9.5 ফ্লোট [2] :

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

আপনার সমস্ত display:inline-block;ডিভ baselineএই ক্ষেত্রে একটি বিশেষ ধরণের ব্যবহার করছে 10.8 লাইন উচ্চতার গণনা: 'লাইন-উচ্চতা' এবং 'উল্লম্ব-সারিবদ্ধ' বৈশিষ্ট্য (খুব শেষ) [3] :

একটি 'ইনলাইন-ব্লক' এর বেসলাইনটি স্বাভাবিক প্রবাহে এটির শেষ লাইন বাক্সের বেসলাইন হয়, যদি না এটির ইন-ফ্লো লাইন বাক্স না থাকে বা যদি এর 'ওভারফ্লো' সম্পত্তিটির 'দৃশ্যমান' ব্যতীত অন্য কোনও গণিত মান থাকে না কোন ক্ষেত্রে বেসলাইনটি নীচের প্রান্তিক প্রান্ত।

সুতরাং আপনি যখন ভাসমান উপাদান এবং inline-blockউপাদানগুলি ব্যবহার করছেন তখন ভাসমান উপাদানটি পাশের দিকে ঠেলে দেওয়া হবে এবং ইনলাইন বিন্যাসটি 1 অনুযায়ী পুনরায় গণনা করা হবে । অন্যদিকে, পরবর্তী উপাদানগুলি উপযুক্ত না হলে সংক্ষিপ্ত করা হবে। যেহেতু আপনি ইতিমধ্যে ন্যূনতম পরিমাণে জায়গা নিয়ে কাজ করছেন, তাই আপনার উপাদানগুলিকে সংশোধন করার পরে তাদের 2 চাপানোর উপায় নেই । এই ক্ষেত্রে, সর্বোচ্চ উপাদানটি আপনার মোড়ক ডিভের আকারটি সংজ্ঞায়িত করবে, এইভাবে baseline 3 টি সংজ্ঞায়িত করবে , অন্যদিকে অবস্থানের বিবরণ এবং প্রস্থের 2 বর্ণিত সংশোধনটি এ জাতীয় ন্যূনতম ব্যবধানে সর্বাধিক উচ্চতার উপাদানগুলিতে প্রয়োগ করা যাবে না। এই ক্ষেত্রে আমার প্রথম ডেমোর মতো আচরণের ফলাফল হবে।

সবশেষে, যে কারণটি আপনার নীচের প্রান্তে ঠেলাতে overflow:hiddenবাধা #firstDivদেবে #container, তবুও আমি 11 অনুচ্ছেদে কোনও কারণ খুঁজে পাইনি । overflow:hiddenএটি ব্যতীত 2 এবং 3 দ্বারা ব্যতীত এবং সংজ্ঞায়িত হিসাবে কাজ করে । ডেমো

টিএল; ডিআর: ডাব্লু 3 সুপারিশ এবং ব্রাউজারে প্রয়োগগুলি সম্পর্কে খুব ঘনিষ্ঠ নজর রাখুন। আমার নম্র মতে ভাসমান উপাদানগুলি আপনার আশেপাশের উপাদানগুলিতে যে পরিবর্তনগুলি করে তা আপনি যদি না জানেন তবে অপ্রত্যাশিত আচরণ দেখানোর জন্য দৃ are় প্রতিজ্ঞ। এখানে আরও একটি ডেমো যা ভাসমানগুলির সাথে একটি সাধারণ সমস্যা দেখায়।

Comments

এই "স্ট্যান্ডার্ড" একটি অবিশ্বাস্য জগাখিচুড়ি। এটি আশ্চর্যজনক যে তারা ব্রাউজারগুলির মধ্যে এই জিনিসটিকে সামঞ্জস্যপূর্ণ আচরণ করতে সক্ষম করেছে। ওহ অপেক্ষা করুন না, তারা কখনই এটি করতে সক্ষম হয় নি।

— ট্রায়ঙ্কো

Answer 5

_{আমি প্রথমে এই প্রশ্নের উত্তর দেওয়া শুরু করেছিলাম , তবে শেষ করার আগে এটি ডুপ হিসাবে লক করা হয়েছিল, সুতরাং আমি এখানে পরিবর্তে উত্তরটি পোস্ট করি।}

প্রথমত, আমাদের কী তা বুঝতে inline-blockহবে। এমডিএন-
এর সংজ্ঞা বলছে:

উপাদানটি একটি ব্লক উপাদান বাক্স তৈরি করে যা পার্শ্ববর্তী সামগ্রী দিয়ে প্রবাহিত হবে যেন এটি একটি একক ইনলাইন বাক্স (প্রতিস্থাপিত উপাদানের মতো আচরণ করা)

এখানে কী চলছে তা বুঝতে আমাদের দেখতে হবে vertical-alignএবং এটির ডিফল্ট মান baseline।

এই দৃষ্টান্তটিতে আপনার এই রঙের চার্ট রয়েছে:
নীল: বেসলাইন
লাল: লাইন-উচ্চতার
শীর্ষ এবং নীচে সবুজ: ইনলাইন সামগ্রী সামগ্রীটির শীর্ষ এবং নীচে।

# বাম উপাদানগুলিতে, আপনার কাছে কিছু পাঠ্য সামগ্রী রয়েছে যা বেসলাইনটি কী তা নিয়ন্ত্রণ করে। এর অর্থ হ'ল পাঠ্যটি # বামনের জন্য বেসলাইনটি সংজ্ঞায়িত করে।
# ডানে, কোনও সামগ্রী নেই, তাই ব্রাউজারের কাছে বাক্সের নীচের অংশটিকে বেসলাইন হিসাবে ব্যবহার করা ছাড়া অন্য কোনও বিকল্প নেই।

এই ভিজ্যুয়ালাইজেশনটি দেখুন যেখানে আমি উদাহরণটির ভিত্তিতে বেসলাইনটি আঁকলাম যেখানে প্রথম ইনলাইন ধারকটিতে কিছু পাঠ্য রয়েছে এবং পরেরটি খালি রয়েছে:

যদি আপনি নির্দিষ্টভাবে একটি উপাদান শীর্ষে প্রান্তিককরণ করেন তবে আপনি সত্যই বলেছেন যে আপনি এই উপাদানটির শীর্ষটি লাইন বাক্সের শীর্ষে প্রান্তিককরণ করেছেন।

এটি একটি উদাহরণ দ্বারা বুঝতে আরও সহজ হতে পারে।

div {
    display: inline-block;
    width: 100px;
    height: 150px;
    background: gray;
    vertical-align: baseline;
}
div#middle {
    vertical-align: top;
    height: 50px
}
   
div#right {
    font-size: 30px;
    height: 100px
}

<div id="left">
  <span>groovy</span>
</div>
<div id="middle">groovy</div>

<div id="right">groovy</div>

ফলাফলটি এটি - এবং আমি নীল বেসলাইন এবং লাল রেখার বাক্সটি যুক্ত করেছি: এখানে কী ঘটেছিল তা হল লাইন বাক্সটির উচ্চতা কীভাবে সম্পূর্ণ লাইনের বিষয়বস্তু স্থাপন করা হয় তার উপর নির্ভর করে। এর অর্থ হ'ল উপরের প্রান্তিককরণ গণনা করতে গেলে প্রথমে বেসলাইন প্রান্তিককরণগুলি গণনা করতে হবে। উপাদান আছে , তাই এই বেসলাইন পজিশনিং জন্য ব্যবহার করা হয়। এবং এবং উল্লম্বভাবে অবস্থান করে যাতে তাদের বেসলাইনগুলি সারিবদ্ধ হয় are এটি হয়ে গেলে, লাইন বাক্সের উচ্চতা বৃদ্ধি পেয়েছে, কারণ বৃহত্তর ফন্টের আকারের ফলে উপাদানটিকে কিছুটা উপরে ঠেলে দেওয়া হয়েছে। তারপরে উপাদানটির শীর্ষ অবস্থানটি গণনা করা যায় এবং এটি লাইন বাক্সের শীর্ষে বরাবর রয়েছে।
#middlevertical-align:top#left#right#right#middle

Answer 6

সমস্যাটি হ'ল কারণ আপনি ফ্লোট প্রয়োগ করেছেন: দ্বিতীয় ডিভিতে রেখে left যা দ্বিতীয় ডিভকে বাম দিকে আসতে দেয় এবং আপনার প্রথম ডিভিটি ড্রপ করে এবং আপনার দ্বিতীয় ডিভের পরে আসে। যদি আপনি ভাসা লাগান: প্রথম ডিভিতেও বাম, আপনার সমস্যাটি চলে যাবে।

ওভারফ্লো: লুকানো আপনার লেআউটে কোনও সমস্যা সৃষ্টি করছে না, ওভারফ্লো: লুকানো কেবল একটি ডিভের অভ্যন্তরীণ উপাদানকে প্রভাবিত করে, এর বাইরে থাকা অন্যান্য উপাদানগুলির সাথে এর কোনও যোগসূত্র নেই।

Comments

ঠিক আছে যদি এটি ধাক্কা দেওয়া হচ্ছে কারণ এটি ভাসমান ডিভের পরে দ্বিতীয় আসে তবে তৃতীয় ডিভ কেন নীচে যায় না?

— শন টেলর

কারণ তৃতীয় ডিভের দ্বিতীয় ডিভ রয়েছে যার আগে ভাসা নেই: বাম;

— পাল সিং

তবে এই নিয়মটি কোথায় উল্লেখ করা হয়েছে যে যদি কিছু ডিভ যদি ভাসমান ডিভের পরে আসে তবে তা নীচে নেমে আসবে? আমি w3.org পরীক্ষা করেছি।

— শন টেলর

যে উপাদানটি ভাসছে না বেসলাইনটিতে এবং যদি আপনি আমার চেয়ে নেতিবাচক ভোট দিয়ে থাকেন তবে এটি অবশ্যই সবচেয়ে যুক্তিযুক্ত উত্তর ছিল

— পাল সিং

না, আমি নেতিবাচক ভোট দিয়েছি না এবং হ্যাঁ আপনার উত্তর নেতিবাচক প্রাপ্য নয়। সবেমাত্র উপরের দিকে ভোট দিয়েছেন।

— শন টেলর

Answer 7

padding:0;শরীরে যুক্ত করার চেষ্টা করুন এবং আপনার ডিভের মার্জিনটি সরিয়ে ফেলুন।

background-color:*anyপার্থক্যটি পরীক্ষা করতে ব্যাকগ্রাউন্ড * বাদ দিয়ে রঙ যুক্ত করুন ।

Comments

ফর্ম্যাট কোডের উত্তরটি সম্পাদনা করুন, আপনি কোডটি শুরু করার আগে এবং কোড শেষ করার পরে প্রতীকটি যুক্ত করে কোডটি ফর্ম্যাট করতে পারেন। যেমন codeউদাহরণ:। background-color:any color

— জিনো শাজি

Answer 8

সমস্ত উপাদানগুলির সমস্ত সিএসএস বৈশিষ্ট্যকে একই করে দেখানোর চেষ্টা করুন।

আমার অনুরূপ সমস্যা ছিল এবং এটি ঠিক করার সময় আমি সনাক্ত করেছি যে আমি ফন্ট সম্পত্তি সহ একটি এলিমেন্ট ডিভ এলিমেন্টে ফেলে দিচ্ছি।

ফন্টের সম্পত্তি সহ সেই এলিমেন্টটি ফেলে দেওয়ার পরে সমস্ত ডিআইভির প্রান্তিককরণটি বিরক্ত হয়েছিল। এটি ঠিক করতে আমি সমস্ত ডিআইভি উপাদানগুলিতে হরফ উপাদানগুলির মতো হরফ সম্পত্তি সেট করে থাকি।

নিম্নলিখিত উদাহরণে, ".dldCuboidButton" শ্রেণীর ড্রপযুক্ত উপাদান ফন্ট-আকারের সাথে সংজ্ঞায়িত করা হয়েছে: 30 px।

তাই আমি বাকী ক্লাসে একই সম্পত্তি যুক্ত করেছি। সেভাবে সমস্ত ডিআইভি উপাদান উপাদানকে এনে দেওয়ার আগে এবং পরে একই পরিমাপ অনুসরণ করে।

.cuboidRecycle {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.liCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}

.dldCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#009933;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.dldCuboidButton {
    background-color:  #7c6436;
    color: white; /* White text */
    font-size: 30px; /* Set a font-size */
    border-radius: 8px;
    margin-top: 1px;
  }

এখানে উপরের সিএসএস ব্যবহার করে গতিশীলভাবে নির্মিত এইচটিএমএলের উদাহরণ রয়েছে।

$("div#tabs").append(
  "<div id='" + newTabId + "'>#" + uniqueId + 
  "<input type=hidden id=hdn_tmsource_" + uniqueId + "  value='" + divTmpfest + "'>" + 
  "<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" + 
  "<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)'  ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
  "<div id='" + divDropLeCuboid  + "' class=liCollect ondrop='dropForLinkExport(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
  "<div id='" + divDropDwldCuboid  + "' class=dldCollect ondrop='dropForTMEntry(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
  "</div>" 
);