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

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 निर्धारित नहीं कर सकता।

Comments

पूर्ण तैनात स्थिति के

— सैयद

Answer 1

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

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

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

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

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;
}

Comments

यहां ठोकर खाने वाले किसी व्यक्ति के लिए, यह जानने की कोशिश करना कि आपका मार्जिन क्यों छोड़ा गया है: -16px और अतिप्रवाह: छिपी हुई चाल काम नहीं करती है। मैंने इस बात पर ध्यान नहीं दिया कि मेरे पास सही पैडिंग भी थी, इसलिए मुझे मार्जिन-राइट: -16px की आवश्यकता थी। इसके अलावा मैंने चौड़ाई का इस्तेमाल किया: यदि आवश्यक हो तो कंटेनर के लिए 100vw, डननो।

— तेमुके

Answer 2

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

एचटीएमएल

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

सीएसएस

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

Comments

क्या एक प्रतिभाशाली विचार है!

— ओह चिन बून

कूल वर्कअराउंड, मैं लगभग एक स्क्रिप्ट लिखना शुरू करने वाला था। धन्यवाद।

— जोश

Answer 3

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

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

यदि आप सीएसएस का उपयोग करके अपने MediaElement वीडियो तरल बनाना चाहते हैं, तो नीचे क्रिस Coyier द्वारा एक महान चाल है: http://css-tricks.com/rundown-of-handling-flexible-media/

बस इसे अपने सीएसएस में जोड़ें:

.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;
}

मुझे उम्मीद है यह मदद करेगा।

Answer 4

इस तरह की लेआउट समस्या को अब फ्लेक्सबॉक्स के साथ हल किया जा सकता है, पूर्ण स्थिति या फ़्लोट्स के साथ ऊँचाई या नियंत्रण लेआउट को जानने की आवश्यकता से बचा जाता है। ओपी का मुख्य प्रश्न यह था कि कैसे एक माता-पिता को अज्ञात ऊंचाई के बच्चों को शामिल किया जाए, और वे इसे एक निश्चित लेआउट के भीतर करना चाहते थे। "फिट-सामग्री" के लिए मूल कंटेनर की ऊंचाई निर्धारित करता है; "डिस्प्ले: फ्लेक्स" और "जस्टिफाई-कंटेंट: स्पेस-बीच" का उपयोग करके उस सेक्शन / कॉलम लेआउट का निर्माण होता है जो मुझे लगता है कि ओपी बनाने की कोशिश कर रहा था।

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

<div style="clear:both">Clear won't do.</div>

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

* { text-align: center; }
article {
    height: fit-content ;
    display: flex;
    justify-content: space-between;
    background: whitesmoke;
}
article div { 
    background: yellow;     
    margin:20px;
    width: 30px;
    height: 30px;
    }

.one {
    background: red;
}

.two {
    background: blue;
}

मैंने ओपी की फ़ेल्ड को संशोधित किया: http://jsfiddle.net/taL4s9fj/

फ्लेक्सबॉक्स पर सीएसएस-ट्रिक्स: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

यह एक और देर से उत्तर है, लेकिन मुझे चार वर्गों के बीच "बार" पाठ रखने का एक काफी सरल तरीका पता चला है। यहां मैंने जो बदलाव किए हैं; बार सेक्शन में मैंने "बार" टेक्स्ट को एक सेंटर और डिव टैग में लपेटा।

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

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

.bar{
    position: relative;
}

Comments

<केंद्र> का उपयोग न करें! इसे हटा दिया गया है।

— इयान डेविन

... एचटीएमएल 4 (ईस्वी 1997) के बाद से

— फ्रिज