मैं एक पूर्ण स्थानांतरित div को अपने माता-पिता के बराबर चौड़ाई कैसे बना सकता हूं कुछ मार्जिन

Question

मैं एक आंतरिक div चाहता हूं कि विभिन्न आकार के कंटेनर divs के अंदर साइटें हों, और एक निश्चित बाएं स्थिति पर शुरू हो जाएं और फिर एक चौड़ाई है जो भरती है बाकी कंटेनर ऊपर। मैंने बिंदु प्राप्त करने का प्रयास करने के लिए नीचे कुछ उदाहरण सीएसएस शामिल किया है।

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

स्पष्टीकरण के लिए, इसकी चाल यह है कि बाएं सीमा को ठीक करना है, और बाएं सीमा को कंटेनर की दाहिनी सीमा के विरुद्ध होना चाहिए। मैं स्थिति का उपयोग नहीं कर सकता: सापेक्ष, और जावास्क्रिप्ट, लेकिन मैं शायद ऐसा करने से पहले .inner1 और .inner2 divs को हार्ड-कोड वाली चौड़ाई के साथ बनाना समाप्त कर दूंगा। लेकिन इससे बचने की उम्मीद है।

.container1 { 
    position: relative; 
    width: 400px; 
    height: 300px; 
} 

.container2 { 
    position: relative; 
    width: 500px; 
    height: 300px; 
} 

.inner { 
    position: absolute; 
    top: 0px; 
    left: 200px; 
    height: 100%; 
    width: 100%; 
} 

Answer 1

बस top, left, bottom, और right सभी गुणों की निर्दिष्ट करें और बॉक्स उन बिंदुओं के सभी पर होना का विस्तार होगा।

.container { 
    position: relative; 
    width: 400px; 
    height: 300px; 
} 

.inner { 
    position: absolute; 
    top: 0; 
    left: 200px; 
    bottom: 0; 
    right: 0; 
} 

See the jsFiddle.

Answer 2

मैं वास्तव में क्या आप की जरूरत है, लेकिन आप प्रतिशत क्यों इस्तेमाल नहीं करते नहीं मिलता?

बजाय

: तदनुसार छोड़ दिया और चौड़ाई विशेषता के लिए

.inner { 
    position: absolute; 
    top: 0px; 
    left: 50%; 
    height: 100%; 
    width: 50%; 
} 

सेटअप प्रतिशत:

.inner { 
    position: absolute; 
    top: 0px; 
    left: 200px; 
    height: 100%; 
    width: 100%; 
} 

आप की तरह कुछ क्यों प्रयोग नहीं करते। 40-60, 30-70 और इतने पर।

उम्मीद है कि इससे मदद मिलती है। यदि नहीं, तो कृपया थोड़ा और निर्दिष्ट करें।

सम्मान

Answer 3

यह काम करता है। बाहरी बॉक्स की चौड़ाई को जो कुछ भी आप चाहते हैं उसे बदलें और आंतरिक बॉक्स इसे मिलान करने के लिए बढ़ता है।

.container { 
    width: 400px; 
    height: 300px; 
} 

.inner { 
    position: relative; 
    margin-left: 200px; 
    height: 100%; 
} 

संपादित करें: here's a fiddle