बच्चे को एक अतिप्रवाह के बाहर दिखाई दें: छिपे हुए माता-पिता

Question

सीएसएस में overflow:hidden माता-पिता के कंटेनरों पर सेट किया गया है ताकि वे अपने अस्थायी बच्चों की ऊंचाई के साथ विस्तार कर सकें।

लेकिन यह भी एक और दिलचस्प विशेषता है जब के साथ संयुक्त margin: auto...

यदि PREVIOUS भाई-बहन एक अस्थायी तत्व है, तो यह वास्तव में इसके लिए juxtapose दिखाई देगा। यह है कि अगर सिबलिंग है float:leftतो कंटेनर के साथ float:none overflow:hiddenसिबलिंग के दाईं ओर दिखाई देगा, कोई नई रेखा नहीं - जैसे कि यह सामान्य प्रवाह में तैर रहा था। यदि पिछला सिबलिंग है float:rightतो कंटेनर सिबलिंग के बाईं ओर दिखाई देगा। इस कंटेनर का आकार बदलने से यह तैरते हुए तत्वों को केन्द्रित करता है। यह कहें कि यदि आपके दो पिछले भाई-बहन हैं, तो एक float:leftदूसरे को float:right, कंटेनर दोनों के बीच में स्थित दिखाई देगा।

तो यहाँ समस्या है ...

मैं बच्चों के मास्किंग के बिना उस प्रकार के लेआउट को कैसे बनाए रख सकता हूं?

पूरे वेब पर Googling मुझे clear:bothएक कंटेनर को कैसे और विस्तारित करने के तरीके देता है ... लेकिन मुझे बाएं / दाएं पूर्व-बाल केंद्र को बनाए रखने के लिए कोई वैकल्पिक समाधान नहीं मिल सकता है। यदि आप कंटेनर बनाते हैं overflow:visibleतो कंटेनर अचानक फ्लोटिंग तत्वों के लेआउट प्रवाह को अनदेखा कर देता है और फ्लोटिंग तत्व के स्तर पर दिखाई देता है।

तो सवाल :

मेरे पास overflow:hiddenलेआउट को संरक्षित करने के लिए कंटेनर है ...

मैं इसे कैसे बना सकता हूं ताकि बच्चे नकाबपोश न हों? मुझे बच्चे को कंटेनर के बाहर माता-पिता के सापेक्ष बिल्कुल तैनात करने की आवश्यकता है।

या

मैं ऐसा कैसे कर सकता हूं overflow:visibleकि मैं कंटेनर के बाहर माता-पिता के सापेक्ष एक बच्चे को पूरी तरह से स्थिति दे सकता हूं ... हाँ, भाई की तरह तैरने वाले लेआउट-प्रवाह को संरक्षित करें?

Answer 1

You can use the clearfix to do "layout preserving" the same way overflow: hidden does.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

add class="clearfix" class to the parent, and remove overflow: hidden;

Comments

हम्म! चतुर, मैं अभी इसके साथ प्रयोग कर रहा हूं। वर्तमान में मुझे जो मिल रहा है, वह यह है कि जेनरेट की गई सामग्री सही तरीके से व्यवहार करती है, जिसे लेआउट के प्रवाह में संरक्षित किया जा रहा है, हालांकि अभिभावक अभी भी इसे अनदेखा करेंगे और फ्लोटिंग तत्वों की परत को खोलेंगे। हालाँकि, यह एक बहुत अच्छा विचार है और मैं इसे और अधिक देखने के लिए खेलूंगा कि क्या मुझे यह सही ढंग से व्यवहार करने के लिए मिल सकता है, और वोट करने के लिए वापसी कर सकता हूं। धन्यवाद :)।

— निशानदलाल

@ user1671639 आपका उदाहरण वास्तव में एक उपसर्ग के लिए लागू नहीं होता है। आपको कुछ और चाहिए, इसलिए मेरा सुझाव है कि आप अपनी समस्या के साथ एक प्रश्न पोस्ट करें।

— Frexuz

यह बिल्कुल उसी तरह से काम नहीं करता है overflow:hidden। माता-पिता के लिए एक स्पष्ट उपसर्ग लागू करने से सभी बच्चे घटकों को "समान" के रूप में सम्‍मिलित होने की अनुमति नहीं मिलती है जो माता-पिता के समान है।

— खोम नाजिद

Answer 2

मेरे लिए पोस्ट किए गए जवाबों में से किसी ने भी काम नहीं किया। position: absoluteहालांकि बाल तत्व के लिए सेटिंग ने काम किया।

Comments

लेकिन अगर यह मूल DIV (जो अतिप्रवाह: छिपा हुआ है) की सीमाओं से परे चला गया, तो क्या अभिभावक DIV इसे बाहर नहीं निकालेंगे?

— निशानदाल

अफाक ऐसा नहीं करता, जब तक कि माता-पिता की स्थिति नहीं होती: रिश्तेदार। फिर बच्चे को उसके पहले तैनात (स्थिर नहीं) पूर्वज तत्व के सापेक्ष तैनात किया जाता है, इसे नियमित (माता-पिता) के डोम प्रवाह से बाहर ले जाता है।

— पिम शफ

यदि माता-पिता के पास स्थिति है: रिश्तेदार और इसकी आवश्यकता नहीं है तो आप इसे स्थिति बना सकते हैं: परेशान।

— येहलाद

सच है, अगर यह माता-पिता के बाहरposition: fixed किसी चीज़ के सापेक्ष पूर्ण या स्थिर है, तो यह दिखाई देगा। हालाँकि, आपको अक्सर कोड परिवर्तन के लिए और अधिक मजबूत होने के लिए माता-पिता के सापेक्ष स्थिति (चाहते) चाहिए। फिर ये समाधान कोई विकल्प नहीं हैं। visibility: hidden

— अर्नेहुगो

Answer 3

यह एक पुराना सवाल है लेकिन इसका सामना खुद किया।

मेरे पास अर्ध-समाधान हैं जो पूर्व प्रश्न के लिए स्थितिजन्य काम करते हैं ("अतिप्रवाह में दिखाई देने वाले बच्चे: छिपे हुए माता-पिता")

यदि माता-पिता को स्थिति की आवश्यकता नहीं है: रिश्तेदार, बस बच्चों की शैलियों को दृश्यता में सेट करें: दृश्यमान।

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

यहाँ एक भद्दा उदाहरण देखने के लिए एक html फ़ाइल में पोस्ट किया गया है।

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

Comments

यहाँ एक भद्दा उदाहरण देखने के लिए एक html फ़ाइल में पोस्ट किया गया है। <code> <div style = "background: # ff00ff; overflow: hidden; width: 500px; height: 500px; position: सापेक्ष;"> <div style = "background: # ff0000; स्थिति: तय; शीर्ष: 10px; छोड़ा : 10px; "> asd <div style =" पृष्ठभूमि: # 00ffff; चौड़ाई: 200px; अतिप्रवाह: दृश्यमान; स्थिति: पूर्ण और दृश्यता: स्पष्ट; दोनों: ऊंचाई; 1000px; शीर्ष: 100px; बायां: 10px; "> एक </ div> </ div> </ div> </ code>

— थॉमस डेविस

जवाब देने की कोशिश करने के लिए धन्यवाद, लेकिन यह काम नहीं करता है क्योंकि निश्चित स्थिति स्वचालित रूप से व्यूपोर्ट के सापेक्ष तत्व को तैनात करती है, जिसका अर्थ है कि यह माता-पिता के साथ नहीं चलती है। वास्तव में, यदि आपके पास एक स्क्रॉलिंग पृष्ठ है, तो स्क्रॉल करते समय यह 10px, 10px पर रहेगा।

— निशानदाल

"अगर माता-पिता को स्थिति होने की आवश्यकता है: रिश्तेदार, तो बच्चों को दिखाने के लिए एकमात्र तरीका संभव था जो स्थिति: निश्चित था।" उसके लिए धन्यवाद। मेरे पास एक पॉपओवर हेल्प बबल था, जिसे अभिभावक के ओवरफ्लो होने पर भी ओवरफ्लो करने की जरूरत थी: स्क्रॉल। मैं एक पूर्ण div, एक रिश्तेदार भीतरी और फिर एक निश्चित सामग्री क्षेत्र के साथ समाप्त हुआ।

— जैकमोरसेसी

धन्यवाद, कि मेरे लिए काम किया। मेरे पास स्थिति के सापेक्ष एक माता-पिता थे, और इसकी आवश्यकता थी क्योंकि इसकी स्थिति का उपयोग करके सेट किया गया था left। margin-leftइसके बजाय उपयोग करने से समान प्रभाव प्राप्त होता है, इसलिए मुझे अब किसी रिश्तेदार के उपयोग की आवश्यकता नहीं है।

— फेलिप कास्त्रो

Answer 4

दूसरों के लिए, यदि क्लियरफिक्स आपके लिए इसका समाधान नहीं करता है, तो गैर-फ्लोटेड सिबलिंग के लिए मार्जिन जोड़ें / जो कि फ्लोटेड सिबलिंग (एस) की चौड़ाई (ओं) के समान हो।