css - tutorial - w3schools




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

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

নীচের div div ছবি এবং কোড ভিতরে div। কারণ পিতা বা মাতা div এবং টেক্সট থাকবে। এবং লাল div পিতামাতার div শেষ উপাদান হতে হবে।

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

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

<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:

Example


একটি flexbox উপায়।

এইচটিএমএল:

<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;
}

সম্পাদনা:

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

Flexbox জন্য ব্রাউজার সমর্থন - Caniuse


এখানে আরেকটি বিশুদ্ধ সিএসএস কৌতুক, যা একটি উপাদান প্রবাহ প্রভাবিত করে না।

#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>


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

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

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

পরিবর্তে জাভাস্ক্রিপ্ট সঙ্গে messing এর চেয়ে আমি আরও একটি ব্যবহার ( সবসময় ভাল আইডিয়া নয় ) সিএসএস উত্তর! :)

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

হ্যাঁ যে সঠিক, DOM অবস্থান করার পরিবর্তে, আমি CSS এ তার ঊর্ধ্বমুখী ঊর্ধ্বমুখী পরিণত।

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


<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>




html