সিএসএস ব্যবহার করে ডিভের নীচে বোতামটি সারিবদ্ধ করুন

Question

আমি আমার ডিভের নীচে ডানদিকে আমার বোতামটি সারিবদ্ধ করতে চাই। আমি এটা কিভাবে করবো?

বিভাগের বর্তমান সিএসএস:

    float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;

Answer 1

আপনি position:absolute;পিতামহক বিভাজনের মধ্যে কোনও উপাদানকে পুরোপুরি স্থিত করতে ব্যবহার করতে পারেন । position:absolute;উপাদানটি ব্যবহার করার সময় প্রথম অবস্থানযুক্ত পিতামাতার ডিভ থেকে একেবারে অবস্থান করা হবে, যদি এটির সন্ধান না করে তবে এটি উইন্ডো থেকে একেবারে অবস্থান করবে যাতে আপনার অবশ্যই বিষয়বস্তু ডিভি অবস্থান রয়েছে তা নিশ্চিত করতে হবে।

বিষয়বস্তুকে ডিভ অবস্থিত করতে, সমস্ত positionমান যা স্থির হয় না তা কাজ করবে তবে relativeএটি সবচেয়ে সহজ কারণ এটি নিজের দ্বারা ডিভসের অবস্থান পরিবর্তন করে না।

সুতরাং position:relative;বিষয়বস্তু ডিভ যোগ করুন , বোতাম থেকে ভাসাটি সরিয়ে এবং বোতামে নিম্নলিখিত সিএসএস যুক্ত করুন:

position: absolute;
right:    0;
bottom:   0;

Comments

@ হ্যারি জয়: আপনি কি position: relativeএমন উপাদানটিতে প্রয়োগ করেছেন যা আপনার ফর্ম + বোতামটি ধারণ করে?

— ত্রিশডট

@ হ্যারি জয়: তারপরে এটি divপৃষ্ঠার সাথে সম্পর্কিত হওয়া উচিত । যদি পাদলেখও এতে অন্তর্ভুক্ত থাকে divতবে তারা কেবল একই জিনিস হিসাবে উপস্থিত হবে। আপনি যদি আপনার পাদলেখের উচ্চতা জানেন তবে বোতামটিতে আপনি ব্যবহার করতে পারেন bottom: HEIGHT_OF_FOOTERpx।

— ত্রিশডট

@ হ্যারি জয়: তাহলে এখানে খুব বেশি বিভ্রান্তি রয়েছে। আপনার এইচটিএমএল / সিএসএসকে জেএসফিডাল পরীক্ষার কেস হিসাবে পোস্ট করা উচিত ।

— ত্রিশডট

@ থার্টিডট: এটি কাজ করে Thnx। অবস্থান ভুলভাবে স্থানান্তরিত: আপেক্ষিক। এটি ভুল ডিভ এ যুক্ত করা হয়েছে।

— হ্যারি জয়

সত্যিই আমাকে কেবল একটি মন্তব্য করতে হবে এবং এই সমাধানটি পেয়ে আমি কতটা খুশি তা সত্যই তুলে ধরেছি। এই আমাকে বছরের পর বছর ধরে বক করছে!

— কে। কিলিয়ান লিন্ডবার্গ

Answer 2

সিএসএস 3 ফ্লেক্সবাক্সকে প্যারেন্ট উপাদানগুলির নীচে বোতামটি প্রান্তিককরণ করতেও ব্যবহার করা যেতে পারে।

প্রয়োজনীয় এইচটিএমএল:

<div class="container">
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

প্রয়োজনীয় সিএসএস:

.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}

স্ক্রীনশট:

দরকারী সংস্থানসমূহ:

• চশমা
• MDN
• সিএসএস কৌশল

* {box-sizing: border-box;}
body {
  background: linear-gradient(orange, yellow);
  font: 14px/18px Arial, sans-serif;
  margin: 0;
}
.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
  padding: 10px;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}
.container .btn-holder button {
  padding: 10px 25px;
  background: blue;
  font-size: 16px;
  border: none;
  color: #fff;
}

<div class="container">
  <p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p>
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

Answer 3

মূল পাত্রে এটি থাকতে হবে:

position: relative;

বোতাম নিজেই এটি থাকতে হবে:

position: relative;
bottom: 20px;
right: 20px;

অথবা আপনি যা পছন্দ করেন

Comments

নোট করুন যে এই প্রশ্নটি প্রায় 3 বছর আগে জিজ্ঞাসা করা হয়েছিল এবং উত্তর পেয়েছে।

— Itay Gal

মনে রাখবেন যে এই উত্তরটি ভুল। সঙ্গে position:relativeবোতাম পরিবর্তে পিতা বা মাতা উপর ভিত্তি করে তার মূল অবস্থান থেকে সরানো যাবে না।

— কোকোস

আপনি ব্যবহার করতে হবে position: absoluteনিচের ডানদিকে থেকে এটার জন্য যাতে।

— ক্যাপ্টেনবলি

Answer 4

ডানদিকে যায় এবং বাম জন্য একইভাবে ব্যবহার করা যেতে পারে

.yourComponent
{
   float: right;
   bottom: 0;
}

Comments

এটি কেবল আপনার বোতামটি ডানদিকে সারিবদ্ধ করে। নীচে ডান নয়।

— রুবেন