मैं अपने माता-पिता <div> के तल पर एक आंतरिक <div> कैसे भेज सकता हूं?

Question

नीचे एक और 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>

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>

लेकिन क्योंकि आंतरिक div बिल्कुल स्थित है, इसलिए आपको हमेशा बाहरी div ओवरलैपिंग में अन्य सामग्री के बारे में चिंता करनी होगी (और आपको हमेशा निश्चित ऊँचाई सेट करनी होगी)।

यदि आप ऐसा कर सकते हैं, तो यह बेहतर है कि अपने भीतर के अंतिम डीवा ऑब्जेक्ट को अपने बाहरी डिवीजन में विभाजित करें और इसे "स्पष्ट: दोनों" पर सेट करें।

Comments

आपकी व्याख्या और IE हैक के लिए धन्यवाद (यदि मैं गलत नहीं हूँ तो आपने ** चौड़ाई जोड़ दी: IE हैक के लिए 100%)।

— uzay95

नहीं, चौड़ाई: 100% आपके मूल में थी - मैंने इसे नहीं जोड़ा।

— जॉन स्मॉक

मैंने उन अनुभागों को बोल्ड करने का प्रयास किया जिन्हें मैंने बदल दिया था, लेकिन मार्कडाउन कोड ब्लॉकों के अंदर लागू नहीं होता है :-P

— जॉन स्मॉक

:) वास्तव में मैं नहीं पा सकता कि हम IE को प्रतीकों के साथ कैसे हैक कर रहे हैं, इसलिए मैंने सोचा कि यह IE हैकिंग है :)

— uzay95

बस ध्यान रखें कि यदि मूल कंटेनर तैर रहा है, तो यह दृष्टिकोण काम नहीं करेगा।

— क्लेविस

Answer 2

एक फ्लेक्सबॉक्स तरीका।

HTML:

<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

Comments

OMG, जहाँ आप मेरे सभी [प्रोग्रामिंग] जीवन रहे हैं! ;) मैं प्यार करता हूँ कि यह बहुत आसान है और स्थिति के साथ खिलवाड़ नहीं करता है, और यह सभी ब्राउज़रों में काम के बारे में लगता है: caniuse.com/#feat=flexbox । यह आधुनिक प्रोग्रामिंग के लिए समाधान और स्वीकृत उत्तर होना चाहिए।

— सेबलफोस्टे

फ्लेक्सबॉक्स आमतौर पर इन दिनों "आसान तरीका" है और इसमें (लगभग) महान ब्राउज़र समर्थन और प्रलेखन है। उत्तर के लिए caniuse लिंक जोड़ना।

— फ्रैंकलिन टार्टर

Answer 3

बाहरी div position="relative"और आंतरिक div बनाओ position="absolute"और इसे सेट करें bottom="0"।

Comments

और width=100%भी।

— केविन

हां, यह काम करता है लेकिन पूर्ण स्थिति "प्राकृतिक लेआउट" को तोड़ती है। इनर डिव की ऊंचाई को माता-पिता की ऊंचाई के रूप में शामिल नहीं किया जाएगा और जैसे ही बाहरी div संकरा हो जाएगा, आप बाहरी div में अन्य सामान के साथ ओवरलैप देख सकते हैं।

— आयुष गुप्ता

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

बहुत बढ़िया एक अगर माता पिता div पर एक ऊंचाई निर्धारित करना चाहते हैं! धन्यवाद!

— जोहान नॉर्डली

यह मेरे लिए सबसे अच्छा जवाब था

— रसेल चिशोल्म

महान! दूसरे फ्लेक्स सॉल्यूशन ने मेरी सारी सामग्री को बाहर कर दिया, यह उस वस्तु को अलग कर देता है जिसे आप बाकी हिस्सों से नीचे रखना चाहते हैं। महान समाधान!

— एलेजांद्रो अरिस्टीज़बल 21

Answer 5

आप पूर्ण स्थिति नहीं चाहते हैं क्योंकि यह रिफ्लो को तोड़ सकता है: कुछ परिस्थितियों में, दादा-दादी तत्व display:table;और मूल तत्व बनाने के लिए एक बेहतर समाधान है display:table-cell;vertical-align:bottom;। ऐसा करने के बाद, आपको बच्चे के तत्वों को देने में सक्षम होना चाहिए display:inline-block;और वे स्वचालित रूप से माता-पिता के नीचे की ओर बहेंगे।

Answer 6

नोट: यह किसी भी तरह से इसे करने का सबसे अच्छा संभव तरीका नहीं है!

स्थिति : मुझे वही गरिमा करनी थी, केवल मैं कोई अतिरिक्त विभाग नहीं जोड़ पा रहा था, इसलिए मेरे पास जो कुछ भी था उससे मैं फंस गया था और भीतर के एचटीएमएल को हटाने और जावास्क्रिप्ट के माध्यम से दूसरा बनाने के लिए लगभग २ रेंडर की तरह मुझे सामग्री की आवश्यकता थी नीचे (एनिमेटेड बार)।

उपाय: यह देखते हुए कि मैं उस समय कितना थका हुआ था, इस तरह की विधि के बारे में सोचना भी सामान्य लगता है, लेकिन मुझे पता था कि मेरे पास एक पैरेंट डोम तत्व है, जो बार की ऊंचाई से शुरू हो रहा था।

जावास्क्रिप्ट के साथ खिलवाड़ करने के बजाए मैंने आगे ( नहीं हमेशा अच्छा विचार ) सीएसएस जवाब का इस्तेमाल किया! :)

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

हाँ, यह सही है क्योंकि डोम की स्थिति के बजाय, मैंने उसके माता-पिता को सीएसएस में उल्टा कर दिया।

मेरे परिदृश्य के लिए यह काम करेगा! संभवतः दूसरों के लिए भी! कोई लौ नहीं! :)

Comments

यह करने के लिए सबसे अच्छा संभव तरीका नहीं हो सकता है, लेकिन यह बहुत भयानक है, बहुत रचनात्मक दृष्टिकोण है। मैं खुद इस मुद्दे पर आज थोड़ी देर के लिए कुश्ती कर रहा हूं, मेरे मुख्य चिपके हुए बिंदु: कोई सेट ऊँचाई नहीं, पूरी तरह से तरल होना चाहिए (यह समझाने के लिए पर्याप्त वर्ण नहीं कि प्रदर्शन क्यों: तालिका काम नहीं कर रही थी)। इसने सब कुछ खूबसूरती से संभाला; div के अंदर के चित्र भी फ़्लिप हो जाते हैं जब ऐसा होता है तो मैंने उन तत्वों पर कक्षा का इस्तेमाल किया ताकि उन्हें वापस फ्लिप किया जा सके। बिल्कुल वैसा ही दिखता है, जैसा कोई सेट हाइट्स के साथ होना चाहिए। थोड़ा हैकी लेकिन हे, कभी-कभी कोई बेहतर विकल्प नहीं होता। बहुत बढ़िया!

— tganyan

Answer 7

यदि आप माता-पिता की हाइट जानते हैं, तो यह पूर्ण 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:

उदाहरण

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>