एक div को दूसरे div के नीचे की तरफ पोजिशन करना

102

मेरे पास बाहरी div और आंतरिक div है। मुझे बाहरी हिस्से के निचले हिस्से में आंतरिक भाग लगाने की आवश्यकता है।

बाहरी div लोचदार है (चौड़ाई: उदाहरण के लिए 70%)। मुझे आंतरिक ब्लॉक को केंद्र में रखने की भी आवश्यकता है।

वर्णित मेकअप का सरल मॉडल नीचे दी गई तस्वीर पर दिखाया गया है:

यहां छवि विवरण दर्ज करें

html css layout

ऊंचाई के रूप में अच्छी तरह से लोचदार है? यदि नहीं, तो आप अंतर बॉक्स को इनर बॉक्स के लिए सेट कर सकते हैं (आउटरबॉक्सहाइट - इनरबॉक्सहाइट)।

— पियरिक्स

@peirix: हाँ, बाहरी ब्लॉक की ऊंचाई बदल सकती है और हम इसे नहीं जानते

— रोमन

79

फ़ायरफ़ॉक्स 3, क्रोम 1 और IE 6, 7 और 8 पर परीक्षण और काम कर रहा है:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
            height: 100px; position: relative;'>
    Outer
    <div style='background-color: green;
                position: absolute; left: 0; width: 100%; bottom: 0;'>
        <div style='background-color: magenta; width: 100px;
                    height: 30px; margin: 0 auto; text-align: center'>
            Inner
        </div>
    </div>
</div>
</body>
</html>

यहां लाइव संस्करण: http://jsfiddle.net/RichieHindle/CresX/

— RichieHindle
स्रोत

धन्यवाद, आपका समाधान लगभग सही है। मुझे केवल IE के लिए ग्रीन ब्लॉक की शैली में "// मार्जिन-लेफ्ट: -40px" जोड़ना था। मार्जिन-लेफ्ट विशेषता वाले इस हैक के बिना IE7 में आपके ग्रीन ब्लॉक को छोड़ दिया गया था। क्या कोई समझा सकता है कि यह 40px कहाँ से आता है?

— रोमन

IE7 शब्द "आउटर" के बाद क्षैतिज रूप से हरे रंग की div की स्थिति बना रहा था। मैंने "बाएं: 0" निर्दिष्ट करने के लिए कोड अपडेट किया है।

— रिचीहिंडले

13

इसे केंद्र में रखने के लिए, आपको नीचे के लिए एक रैपिंग डिव चाहिए।

<style>
   /* making it look like your nice illustration */
   #outer { width: 300px; height: 200px; background: #f2f2cc; border: 1px solid #c0c0c0; }
   #inner { width: 50px; height: 40px; background: #ff0080; border: 1px solid #800000; }

   /* positioning the boxes correctly */
   #outer { position: relative; }
   #wrapper { position: absolute; bottom: 3px; width: 100%; }
   #inner { margin: 0 auto; }
</style>


<div id="outer">
   <div id="wrapper"><div id="inner"></div></div>
</div>

— Magnar
स्रोत

7

CSS3 Flexboxबहुत आसानी से नीचे की स्थिति की अनुमति देता है। फ्लेक्सबॉक्स समर्थन तालिका की जाँच करें

एचटीएमएल

<div class="outer">
  <div class="inner">
  </div>
</div>

सीएसएस

.outer {
  display: flex;
  justify-content: center; /* Center content inside */
}
.inner {
  align-self: flex-end; /* At the bottom of the parent */
}

आउटपुट:

कोड स्निपेट दिखाएं

.outer {
  background: #F2F2CD;
  display: flex;
  width: 70%;
  height: 200px;
  border: 2px solid #C2C2C3;
  justify-content: center;
}
.inner {
  background: #FF0081;
  width: 75px;
  height: 50px;
  border: 2px solid #810000;
  align-self: flex-end;
}

<div class="outer">
  <div class="inner">
  </div>
</div>

स्निपेट का विस्तार करें

— m4n0
स्रोत

5

Ie6 सहित सभी ब्राउज़रों पर अच्छी तरह से काम करता है।

<style>
    #outer{
        width: 70%;
        background-color: #F2F2CC;
        border: 1px solid #C0C0C0;
        height: 500px;
        position: relative;
        text-align: center;
    }

    #inner{
        background-color: #FF0080;
        border: 1px solid black;
        width: 30px;
        height: 20px;

        /* Position at the bottom */
        position: relative;
        top: 95%;

        /* Center */
        margin: 0 auto;
        text-align: left;
    }
</style>

<div id="outer">
    <div id="inner">
    </div>
</div>

— दिमित्री फ़ारकोव
स्रोत

शीर्ष 95% नीचे 10px कहने के समान नहीं है। आप चाहते हैं कि आंतरिक बॉक्स स्क्रीन के आकार के अनुसार नीचे लंगर डाले।

— user959690