स्थिति: पूर्ण और माता-पिता की ऊंचाई?

Question

मेरे पास कुछ कंटेनर हैं और उनके बच्चे केवल पूर्ण/अपेक्षाकृत स्थित हैं। कंटेनर ऊंचाई कैसे सेट करें ताकि उनके बच्चे उनके अंदर हों?

एचटीएमएल

<section id="foo"> 
    <header>Foo</header> 
    <article> 
     <div class="one"></div> 
     <div class="two"></div> 
    </article> 
</section>  

<div style="clear:both">Clear won't do.</div> 
<!-- I want to have a gap between sections here --> 

<section id="bar"> 
    <header>bar</header> 
    <article> 
     <div class="one"></div><div></div> 
     <div class="two"></div> 
    </article> 
</section> 

सीएसएस

article { 
    position: relative; 
} 

.one { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    background: red; 
    width: 30px; 
    height: 30px; 
} 

.two { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    background: blue; 
    width: 30px; 
    height: 30px; 
} 

यहाँ एक jsfiddle है:

कोड यह रहा। मैं चाहता हूं कि "बार" टेक्स्ट 4 वर्गों के बीच दिखाई दे, न कि उनके पीछे।

http://jsfiddle.net/Ht9Qy/

कोई आसान फिक्स?

ध्यान दें कि मुझे इन बच्चों की ऊंचाई नहीं पता है, और मैं ऊंचाई निर्धारित नहीं कर सकता: कंटेनरों के लिए xxx।

Answer 1

अगर मैं समझता हूं कि आप सही तरीके से क्या करने की कोशिश कर रहे हैं, तो मुझे नहीं लगता कि बच्चों को पूरी तरह से तैनात करते समय यह सीएसएस के साथ संभव है।

बिल्कुल स्थानांतरित तत्व दस्तावेज़ प्रवाह से पूरी तरह से हटा दिए जाते हैं, और इस प्रकार उनके आयाम उनके माता-पिता के आयामों को परिवर्तित नहीं कर सकते हैं।

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

वैकल्पिक रूप से, सिर्फ एक ही स्थिति असर पाने के लिए float: left/float:right और मार्जिन का उपयोग करते हुए दस्तावेज़ प्रवाह में बच्चों को रखने की है तो उन्हें overflow: hidden माता पिता (या किसी अन्य clearfix तकनीक) पर उपयोग कर सकते हैं करने के लिए विस्तार करने के लिए उसकी ऊंचाई पैदा करने के लिए अपने बच्चों की है।

article { 
    position: relative; 
    overflow: hidden; 
} 

.one { 
    position: relative; 
    float: left; 
    margin-top: 10px; 
    margin-left: 10px; 
    background: red; 
    width: 30px; 
    height: 30px; 
} 

.two { 
    position: relative; 
    float: right; 
    margin-top: 10px; 
    margin-right: 10px; 
    background: blue; 
    width: 30px; 
    height: 30px; 
} 

Answer 2

यह एक देर से जवाब है, लेकिन स्रोत कोड को देखकर, मैंने देखा है कि जब वीडियो पूर्ण स्क्रीन है, "mejs-कंटेनर-फुलस्क्रीन" वर्ग "mejs-कंटेनर" तत्व में जोड़ा जाता है। इस वर्ग के आधार पर स्टाइल को बदलना संभव है।

.mejs-container.mejs-container-fullscreen { 
    // This rule applies only to the container when in fullscreen 
    padding-top: 57%; 
} 

इसके अलावा

, यदि आप सीएसएस का उपयोग कर अपने MediaElement वीडियो तरल पदार्थ करना चाहते हैं, तो नीचे दिए गए क्रिस Coyier द्वारा एक महान चाल है:

.mejs-container { 
    width: 100% !important; 
    height: auto !important; 
    padding-top: 57%; 
} 
.mejs-overlay, .mejs-poster { 
    width: 100% !important; 
    height: 100% !important; 
} 
.mejs-mediaelement video { 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    width: 100% !important; 
    height: 100% !important; 
} 

मैं: http://css-tricks.com/rundown-of-handling-flexible-media/

बस अपने सीएसएस में जोड़ना आशा करता हूँ की ये काम करेगा।

Answer 3

यह एक और देर का जवाब है, लेकिन मुझे चार वर्गों के बीच "बार" टेक्स्ट रखने का एक आसान तरीका पता चला। मेरे द्वारा किए गए परिवर्तन यहां दिए गए हैं; बार अनुभाग में मैंने एक केंद्र और div टैग के भीतर "बार" टेक्स्ट लपेट लिया।

<header><center><div class="bar">bar</div></center></header> 

और सीएसएस अनुभाग में मैंने एक "बार" वर्ग बनाया जो उपरोक्त div टैग में उपयोग किया जाता है। इसे जोड़ने के बाद बार रंग चार रंगीन ब्लॉक के बीच केंद्रित था।

.bar{ 
    position: relative; 
} 

Answer 4

यहाँ मेरी समाधान नहीं है,
अपने उदाहरण में आप "एक ही शैली" के साथ .one की & .Two तत्वों एक तिहाई तत्व जोड़ सकते हैं, लेकिन निरपेक्ष स्थिति के बिना और छिपे हुए दृश्यता के साथ:

एचटीएमएल

<article> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
</article> 

सीएसएस

.three{ 
    height: 30px; 
    z-index: -1; 
    visibility: hidden; 
}