ओवरफ्लो क्या करता है: उल टैग के लिए छिपा हुआ है?

Question

मैं इस लेख से निर्देशों का उपयोग कर एक से अधिक स्तंभ सूची बना रहा हूं:

एचटीएमएल:

http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

संक्षेप में, यह इस की तर्ज पर कुछ करने के लिए कहते हैं

<div class='block'> 
    <ul> 
    <li> 
     Item1 
    </li> 
    <li> 
     Item2 
    </li> 
    <li> 
     Item3 
    </li> 
    </ul> 
</div> 

सीएसएस:

.block { 
    border: 1px solid black; 
    padding: 10px; 
} 
.block ul { 
    width: 100%; 
    overflow: hidden; 
} 
.block ul li { 
    display: inline; 
    float: left; 
    width: 50%; 
} 

और यह आश्चर्यजनक रूप से काम करता है, लेकिन मैं अतिप्रवाह पर छिपी हुई थी: छुपा सीएसएस घोषणा।

इसके बिना, मेरी बाहरी div इसलिए की तरह गिर:

http://jsfiddle.net/alininja/KQ9Nm/1/

जब उसे शामिल किए जाने, बाहरी div के रूप में वास्तव में बर्ताव करता है मैं इसे कैसे बनना चाहेंगे:

http://jsfiddle.net/alininja/KQ9Nm/2/

मैं सोच रहा हूं क्यों अतिप्रवाह: छुपा इस व्यवहार को ट्रिगर कर रहा है। मैं उम्मीद करता हूं कि बाहरी div को आवश्यक ऊंचाई तक विस्तारित करने के लिए मजबूर करने के बजाय आंतरिक ली आइटम को काट लें।

देखने के लिए धन्यवाद!

Answer 1

जो कुछ भी अंदर हो रहा है वह फ़्लोटिंग नहीं हो सकता है जब तक कि आपके पास छिपी हुई, स्क्रॉल या ऑटो पर ओवरफ़्लो सेट न हो। विधि का असली जादू यह है कि तत्व को एक सेट ऊंचाई के बिना, जब आप छिपाने के लिए अतिप्रवाह सेट करते हैं तो यह आंतरिक तत्वों की ऊंचाई पर ले जाता है।

यहां div आईएमजी के चारों ओर लपेट नहीं पाएगा क्योंकि आईएमजी तैर रहा है।

<div><img style="float:left;height:100px" /></div> 

यहां div आईएमजी की ऊंचाई को वास्तविकता देगा जो अब उचित ओवरफ्लो है।

<div style="overflow:hidden"><img style="float:left;height:100px" /></div> 

आप इसे एक सेट ऊंचाई देने के लिए थे और उसके बाद अतिप्रवाह सेट छिपा हुआ यह कुछ भी है कि अन्यथा बाहर overflowed है | काटना चाहते हैं।

<div style="overflow:hidden;height:50px"><img style="float:left;height:100px" /></div> 

ध्यान दें कि मामलों का एक बहुत में इन तकनीकों clear:both प्रकार अतिरिक्त मार्कअप से बचने के लिए इस्तेमाल किया जा सकता।

Answer 2

overflow: hidden; फ़्लोट li एस युक्त है। overflow: hidden; एक नया ब्लॉक प्रारूपण संदर्भ बनाता है - और यही वह तत्व है जो अपने स्वयं के ब्लॉक स्वरूपण संदर्भों के साथ करता है - उनमें फ्लोट होते हैं। Adding CSS border changes positioning in HTML5 webpage

Answer 3

अतिप्रवाह के साथ

: छिपा हुआ, सामग्री ड्राइव नहीं है/यूएल के आयामों धक्का

मैं एक जवाब StackOverflow पर यहाँ है कि यह थोड़ा और अधिक बताते हैं को इंगित करेंगे। यूएल आयाम ओवरराइड करते हैं और अनदेखा करते हैं कि सामग्री इसके अंदर फिट है या नहीं।

अतिप्रवाह के बिना: सामग्री छुपाएं और उनका व्यवहार यूएल के समग्र आयामों को चला सकता है या नहीं। यह मुख्य रूप से इसलिए है क्योंकि यूएल एक कंटेनर से अधिक है जिसकी सीमाएं इसकी सामग्री से सेट/प्रभावित होती हैं। अतिप्रवाह छिपे हुए के साथ, यूएल ओवरराइडिंग आयामों के साथ व्यू-पोर्ट के रूप में अधिक कार्य करता है, इतना कंटेनर नहीं।