ऊपर अगले दो divs एक दूसरे को

Question

मैं के रूप में तस्वीर में दिखाया गया है 3 divs रखना चाहते हैं एक div रखने div नंबर 2 नीचे

यहाँ से चिपके चाहिए मैं क्या किया है है : http://jsfiddle.net/GLHur/1/

Answer 1

यह काम करता है:

#div3{height:100px;width:100px;border: solid 1px #000; 
display:inline-block;} 
    #div1{height:30px;width:100px;border: solid 1px #000;} 
#div2{height:20px;width:100px;border: solid 1px #000; position: absolute; bottom: 0} 
#div1_2{display:inline-block;vertical-align:top; position: relative; height: 100px;} 

Answer 2

ऐसा कुछ?

http://jsfiddle.net/GLHur/6/

---

या आप एक बार ऊंचाई परिवर्तन सामग्री जोड़ता है?

Answer 3

इस प्रयास करें:

http://jsfiddle.net/GLHur/18/

<div class="con"> 
    <div id="div3"></div> 
    <div id="div1_2"> 
     <div id="div1"></div> 
     <div id="div2"></div> 
    </div> 
</div> 

#div3{height:100px;width:100px;border: solid 1px #000; display:inline-block; background:red;} 

#div1{height:30px;width:100px;border: solid 1px #000; position:absolute; top:0; background:blue;} 
#div2{height:20px;width:100px;border: solid 1px #000; position:absolute; bottom:0; background:green;} 

#div1_2{display:inline-block; vertical-align:top;} 


.con { position:relative; }​ 

Answer 4

<div style="position: relative;"> 
    <div style="height: 100%;"> </div> 
    <div style="position: absolute; right: 0px;"> </div> 
    <div style="position: absolute; right: 0px; bottom: 0px;"> </div> 
</div> 

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

Answer 5

मैं सुझाव है कि आप तू इस बुनियादी positionning के लिए निरपेक्ष स्थिति का उपयोग करें:

<div id="content"> 
    <div id="div3"></div> 
    <div id="div1"></div> 
    <div id="div2"></div> 
</div> 

।

#content { position: relative; height: 100px; width: 220px; } 

#div1{ position: absolute; top: 0; right: 0; height:30px; width:100px; background: blue; } 
#div2{ position: absolute; bottom:0; right: 0; height:20px; width:100px; background: green; } 
#div3{ position: absolute; top: 0; left: 0; height:100px; width:100px; background: red; } 

jsFiddle