2011-05-25 21 views
11

निम्नलिखित example on JS Fiddle को संदर्भित करने के अलावा मुझे यह बताने का कोई तरीका नहीं है - इसमें, अंतिम ब्लू बॉक्स चौड़ाई के 100% तक विस्तारित नहीं होता है जैसा कि मैंने ओवरफ्लो प्रस्तुत किया है: छुपी हुई विशेषता।अतिप्रवाह हो सकता है: छुपा लेआउट लेआउट?

मैं इंप्रेशन ओवरफ़्लो के तहत था: छुपा केवल दृश्यता पहलुओं को प्रभावित करेगा, और लेआउट में हस्तक्षेप नहीं करेगा। क्या कोई इस उदाहरण में क्या हो रहा है समझा सकता है?

संपादित करें: यह समस्या वेबकिट ब्राउज़रों (जैसे क्रोम)

+0

आप इन मुद्दों को कौन सा ब्राउज़र देख रहे हैं? एफएफ –

+1

में मुझे यह ठीक लग रहा है कि वह क्रोम के साथ क्या इंगित कर रहा है। तो शायद वेबकिट – corroded

+3

साइड-नोट: आपके पास एक ही आईडी के साथ एकाधिक तत्व नहीं होना चाहिए, उदा। नीला और लाल। यह इस मुद्दे को उत्पन्न नहीं कर रहा है, हालांकि मैं क्रोम/लिन में देख सकता हूं। – newtron

उत्तर

16

यह इसलिए क्योंकि overflow: hidden, अन्य संपत्तियों के बीच, एक नया block formatting context का परिचय करने के लिए सीमित लगता है।

आप इस महान लेख में प्रभाव के बारे में पढ़ सकते हैं: The magic of overflow: hidden

अद्यतन: मैंने कुछ ऐसा है जो काम कर रहा है (क्रोम पर परीक्षण) में rewritten your jsFiddle। को #red और #blue पर परिभाषित करने के बजाय (जो overflow: hidden के कारण अलग-अलग कार्य करेगा), मैंने #yellow पर margin-right डाला है।

+0

@ bazmegakapa- बहुत बढ़िया- दिशा और पुनः लिखने के लिए धन्यवाद – Yarin

संबंधित मुद्दे