सीएसएस का उपयोग करके div के नीचे बटन को संरेखित करें

Question

मैं अपने बटन को अपने div के निचले दाएं कोने में संरेखित करना चाहता हूं। मैं उसे कैसे कर सकता हूँ?

Div की वर्तमान सीएसएस:

    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;तत्व का उपयोग कर पहले तैनात माता-पिता div से पूरी तरह से तैनात किया जाएगा, अगर यह एक नहीं मिल सकता है तो यह बिल्कुल खिड़की से स्थिति होगी तो आपको यह सुनिश्चित करने की आवश्यकता होगी कि सामग्री div तैनात है।

सामग्री div को तैनात करने के लिए, सभी positionमूल्य जो स्थिर नहीं हैं, काम करेंगे, लेकिन relativeसबसे आसान है क्योंकि यह स्वयं द्वारा divs स्थिति को नहीं बदलता है।

इसलिए position:relative;कंटेंट डिव में जोड़ें , फ्लोट को बटन से हटाएं और निम्न सीएसएस को बटन में जोड़ें:

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

Comments

@ हैरी जॉय: क्या आपने position: relativeउस तत्व पर भी लागू किया है जिसमें आपका फॉर्म + बटन है?

— ३०१३

@ हैरी जॉय: फिर यह divपेज नहीं बल्कि उसके सापेक्ष होना चाहिए । यदि पाद भी इसमें समाहित है div, तो शायद वे केवल एक ही बात प्रतीत होते हैं। यदि आप अपने पाद की ऊंचाई जानते हैं, तो बटन पर आप उपयोग कर सकते हैं bottom: HEIGHT_OF_FOOTERpx।

— ३१०

@ हैरी जॉय: फिर यहाँ बहुत भ्रम है। आपको अपने HTML / CSS को jsFiddle टेस्ट केस के रूप में पोस्ट करना चाहिए ।

— thirtydot

@thdotdot: यह काम कर रहा है। Thnx। गलत स्थिति: रिश्तेदार। इसे गलत विभाजन में जोड़ा।

— हैरी जॉय

वास्तव में मुझे सिर्फ एक टिप्पणी करनी है और वास्तव में यह बताना है कि मुझे इसका समाधान मिल गया है। यह मुझे वर्षों से परेशान कर रहा है!

— । केलियन लिंडबर्ग

Answer 2

CSS3 फ्लेक्सबॉक्स का उपयोग मूल तत्व के तल पर बटन संरेखित करने के लिए भी किया जा सकता है।

आवश्यक HTML:

<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 साल पहले पूछा गया था और इसका जवाब मिला।

— इति गाल

ध्यान दें कि यह उत्तर गलत है। position:relativeबटन के साथ मूल स्थिति के आधार पर इसके मूल स्थान से ले जाया जाएगा।

— कोकोज

आपको position: absoluteनीचे-दाएं से इसके लिए उपयोग करने की आवश्यकता है ।

— कैप्टनबली

Answer 4

दाईं ओर जाता है और बाईं ओर उसी तरह उपयोग किया जा सकता है

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

Comments

यह केवल आपके बटन को दाईं ओर संरेखित करता है। नीचे का अधिकार नहीं।

— रूबेन