কীভাবে আমি তার পিতামাতার <div> এর নীচে একটি অভ্যন্তরীণ </ div> প্রেরণ করতে পারি?

Question

নীচে অন্য ডিভ ছবি এবং কোড ভিতরে ডিভ। কারণ সেখানে পিতামাতার ডিভাইসের পাঠ্য এবং চিত্রগুলি থাকবে। এবং লাল ডিভ প্যারেন্ট ডিভের শেষ উপাদান হবে।

<div style="width: 200px; height: 150px; border: 1px solid black;">
    <div style="width: 100%; height: 50px; border: 1px solid red;">
    </div>
</div>

Comments

তাহলে পিতামাতাদের ডিভ থেকে কোডটি যৌক্তিকভাবে শিশু ডিভের উপরে রাখা হয়েছে? ছবি এবং পাঠ্য কি গতিশীল যুক্ত করা হয়েছে? নির্দিষ্ট প্রশ্ন কি?

— justkt

Answer 1

এটি এক উপায়

<div style="position: relative; 
            width: 200px; 
            height: 150px; 
            border: 1px solid black;">

    <div style="position: absolute; 
                bottom: 0; 
                width: 100%; 
                height: 50px; 
                border: 1px solid red;">
    </div>
</div>

তবে অভ্যন্তরীণ ডিভটি একেবারে অবস্থিত হওয়ার কারণে, আপনাকে সর্বদা বাইরের ডিভের ওভারল্যাপে থাকা অন্যান্য সামগ্রী সম্পর্কে চিন্তা করতে হবে (এবং আপনাকে সর্বদা স্থির উচ্চতা নির্ধারণ করতে হবে)।

যদি আপনি এটি করতে পারেন, তবে আপনার বাহ্যিক ডিভের অভ্যন্তরীণ ডিভকে শেষ ডিওএম অবজেক্ট তৈরি করা ভাল এবং এটি "পরিষ্কার: উভয়" তে সেট করা ভাল।

Comments

আপনার ব্যাখ্যা এবং আইই হ্যাকের জন্য ধন্যবাদ (যদি আমি ভুল না হয় তবে আপনি ** প্রস্থ যুক্ত করেছেন: আইই হ্যাকের জন্য 100%)।

— uzay95

নাহ, প্রস্থ: আপনার মূলটিতে 100% ছিল - আমি এটি যুক্ত করি নি।

— জন স্মোক

আমি পরিবর্তিত বিভাগগুলি গা bold় করার চেষ্টা করেছি, তবে মার্কডাউন কোড ব্লকের ভিতরে প্রয়োগ করে না :

— জন স্মোক

:) আসলে আমি কীভাবে প্রতীক নিয়ে আইই হ্যাক করছি তা পেলাম না, কেন আমি ভাবলাম এটি আইই হ্যাকিং :)

— uzay95

কেবল মনে রাখবেন যে পিতামাতার ধারক যদি ভাসমান হয় তবে এই পদ্ধতির কাজ হবে না।

— ক্লিভিস

Answer 2

একটি ফ্লেক্সবক্স উপায়।

এইচটিএমএল:

<div class="parent">
  <div>Images, text, buttons oh my!</div>
  <div>Bottom</div>
</div>

সিএসএস:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*  not necessary, just to visualize it */

.parent {
  height: 500px;
  border: 1px solid black;
}


.parent div {
  border: 1px solid red;
}

সম্পাদনা:

উত্স - ফ্লেক্সবক্স গাইড

ফ্লেক্সবক্স - ক্যানিউজ জন্য ব্রাউজার সমর্থন

Comments

ওএমজি, আপনি আমার সমস্ত [প্রোগ্রামিং] জীবন কোথায় ছিলেন! ;) আমি ভালবাসি যে এটি এত সহজ এবং অবস্থানের সাথে গোলমেলে না এবং এটি সমস্ত ব্রাউজারগুলিতে কাজ করার মতো বলে মনে হয়: caniuse.com/#feat=flexbox । এটি আধুনিক প্রোগ্রামিংয়ের সমাধান এবং স্বীকৃত উত্তর হওয়া উচিত।

— সাবেলফোস্টে

ফ্লেক্সবক্স হ'ল এই দিনগুলিতে সাধারণত "সহজ উপায়" এবং এতে (প্রায়) দুর্দান্ত ব্রাউজার সমর্থন এবং ডকুমেন্টেশন রয়েছে। উত্তরে ক্যানিজ লিঙ্ক যুক্ত করা হচ্ছে।

— ফ্র্যাঙ্কলিন টার্টার

Answer 3

বাইরের ডিভ position="relative"এবং ভিতরের ডিভ position="absolute"তৈরি করে সেট করুন bottom="0"।

Comments

এবং width=100%খুব।

— কেভিন

হ্যাঁ, এটি কাজ করে তবে নিখুঁত অবস্থান "প্রাকৃতিক বিন্যাস" ভঙ্গ করে। অভ্যন্তরীণ ডিভের উচ্চতা পিতামাতার উচ্চতা হিসাবে অন্তর্ভুক্ত হবে না এবং বাইরের ডিভিটি আরও সঙ্কুচিত হওয়ার সাথে সাথে আপনি বাইরের ডিভিতে অন্যান্য স্টাফগুলির সাথে ওভারল্যাপ দেখতে পাবেন।

— আয়ুষ গুপ্ত

Answer 4

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

#parent {
  min-height: 100vh; /* set height as you need */
  display: flex;
  flex-direction: column;
  background: grey;
}
.child {
  margin-top: auto;
  background: green;
}

<div id="parent">
  <h1>Positioning with margin</h1>
  <div class="child">
    Content to the bottom
  </div>
</div>

Comments

অভিভাবক ডিভের উপর কোনও উচ্চতা নির্ধারণ করতে না চাইলে দুর্দান্ত! ধন্যবাদ!

— জোহান নর্ডলি

এটি আমার পক্ষে সেরা উত্তর ছিল

— রাসেল চিশলম

গ্রেট! অন্যান্য ফ্লেক্স সমাধানটি আমার সমস্ত সামগ্রী স্থান থেকে সরিয়ে নিয়েছে, এটি বাকীটি থেকে নীচে রেখে দিতে চান এমন বস্তুকে আলাদা করে দেয়। দুর্দান্ত সমাধান!

— আলেজান্দ্রো অ্যারিস্টিজাবল

Answer 5

আপনি নিখুঁত পজিশনিং নাও চাইতে পারেন কারণ এটি রিফ্লোটি ভেঙে দেয়: কিছু পরিস্থিতিতে দাদা-পিতা উপাদান display:table;এবং পিতামহীন উপাদানকে আরও ভাল সমাধান করা display:table-cell;vertical-align:bottom;। এটি করার পরে, আপনার সন্তানের উপাদানগুলি দিতে সক্ষম হওয়া উচিত display:inline-block;এবং তারা স্বয়ংক্রিয়ভাবে পিতামাতার নীচের দিকে প্রবাহিত হবে।

Answer 6

দ্রষ্টব্য: এটি কোনওভাবেই এটি করার সর্বোত্তম সম্ভাব্য উপায় নয়!

পরিস্থিতি : আমি একই থিংসটি করতে হয়েছিল কেবলমাত্র আমি কোনও অতিরিক্ত ডিভ যোগ করতে পারছিলাম না, তাই আমি যা ছিলাম তাতে আটকে ছিলাম এবং তার চেয়ে অন্তর্নির্মিত এইচটিএমএল সরিয়ে এবং জাভাস্ক্রিপ্টের মাধ্যমে প্রায় 2 টি রেন্ডারের মতো আমার অন্য বিষয়বস্তু থাকা দরকার ছিল নীচে (অ্যানিমেটেড বার)

সমাধান: আমি যে সময়টিতে ক্লান্ত হয়ে পড়েছিলাম এ জাতীয় পদ্ধতি সম্পর্কে চিন্তা করা এমনকি স্বাভাবিক বলে মনে হয়েছিল তবে আমি জানতাম যে আমার একটি প্যারেন্ট ডোম উপাদান রয়েছে যা বারের উচ্চতা থেকে শুরু হয়েছিল।

জাভাস্ক্রিপ্টের সাথে ঝামেলা করার পরিবর্তে আমি কোনও ( উত্তর সবসময়ই ভাল আইডিএ নয় ) সিএসএস উত্তর ব্যবহার করেছি! :)

-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);

হ্যাঁ, ঠিক আছে, ডিওএমের অবস্থানের পরিবর্তে, আমি সিএসএসে এর পিতামাতাকে উল্টে ফেলেছি।

আমার দৃশ্যের জন্য এটি কাজ করবে! সম্ভবত অন্যদের জন্যও! না শিখা! :)

Comments

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

— tganyan

Answer 7

আপনি যদি পিতামাতার উচ্চতা জানেন তবে নিখুঁত ডিভ এবং টেবিলগুলি এড়ানোর উপায় এখানে:

<div class="parent">
    <div class="child"> <a href="#">Home</a>
    </div>
</div>

সিএসএস:

.parent {
    line-height:80px;
    border: 1px solid black;
}
.child {
    line-height:normal;
    display: inline-block;
    vertical-align:bottom;
    border: 1px solid red;
}

JsFiddle:

উদাহরণ

Answer 8

<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
    <div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
    </div>
</div>