नीचे div की सामग्री को

Question

पर संरेखित करें मेरे पास एक पैरा है जिसमें 2 पैराग्राफ हैं। मैं अनुच्छेदों को div के निचले दाएं भाग में गठबंधन करना चाहता हूं। मैं text-align: right का उपयोग करके पैराग्राम को संरेखित करने में सक्षम था, लेकिन मैं div के नीचे को संरेखित करने के लिए पैराग्राम प्राप्त करने की कोशिश करने के साथ संघर्ष कर रहा हूं।

मार्कअप काफी सरल है:

<div> 
    <p>content 1</p> 
    <p>content 2</p> 
</div> 

सीएसएस:

div{ 
    border: 1px red solid; 
    height: 100px; 
} 

p{ 
    text-align: right; 
} 

मैं paragrams पर position:absolute का उपयोग करने और bottom: 0 की स्थापना, लेकिन इस पैराग्राफ पूर्ण स्थिति के कारण एक दूसरे पर व्याप्त बनाता है की कोशिश की ।

div पूरे पृष्ठ को नहीं फैलाता है, इसलिए अनुच्छेद पाठ div के भीतर बाधित होना चाहिए।

क्या प्रभाव प्राप्त करने का कोई तरीका है जैसे सामग्री "नीचे से बढ़ती है"?

प्रभाव मैं चाहता हूँ इस तरह है (photoshopped):

और इसके बाद के संस्करण की एक बेला: http://jsfiddle.net/cbY6h/

Answer 1

एचटीएमएल

<div class="box"> 
    <div class="content"> 
     <p>content 1</p> 
     <p>content 2</p> 
    </div> 
</div>​​​​​​​​​​​​​​​​​​​​​ 

सीएसएस

.box { 
    border: 1px red solid; 
    height: 100px; 
    position: relative; 
} 

.content { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

विल सामग्री को बॉटो में रखें मैं div के दाहिने हाथ कोने। आप परिणाम http://jsfiddle.net/cbY6h/1/ पर देख सकते हैं।

Answer 2

.content की स्थिति के लिए पूर्ण के बजाय रिश्तेदार का उपयोग करें।

Answer 3

समझने के लिए एक महत्वपूर्ण नोट। यदि आप 100px के बजाय "बॉक्स" की ऊंचाई को 100% में बदलना चाहते हैं, तो यह काम नहीं करेगा। यदि ऊंचाई माप की एक विशिष्ट इकाई के रूप में निर्दिष्ट नहीं है तो यह पता नहीं लगा सकता कि पूर्ण बाल वस्तु को कैसे रखा जाए।

.box { 
border: 1px red solid; 
height: 100%; 
position: relative; 
} 

Answer 4

मैं कुछ इसी तरह की तलाश में था, और फ्लेक्सबॉक्स लेआउट का उपयोग कर समाप्त हुआ।

निम्नलिखित संरचना

<div> 
    <p>content 1</p> 
    <p>another</p> 
    <p>content 2</p> 
</div> 

और इस शैली

div { 
    border: 1px red solid; 
    height: 100px; 

    display: flex; 

    //align items from top to bottom 
    //[I've always thought the opposite, as rows are counted from top to bottom 
    //and columns are counted left to right. Any one have an explanation for this?] 
    flex-direction: column; 

    //main axis align to the bottom, since we are using column for direction 
    justify-content: flex-end; 

} 

p { 
    //cross axis align towards the right. total outcome => bottom right 
    align-self: flex-end; 
} 

आप तस्वीर से लेआउट मिल जाएगा देखते हुए।

संपादित करें: पुराने ब्राउज़र (http://caniuse.com/flexbox) पर काम नहीं करेगा। आप पूर्ण करने के लिए आधुनिक

के प्रमुख

.flexbox .rest-of-your-selector { rule }