छुपा ओवरफ्लो

Question

के साथ इनलाइन divs मैं पक्ष में 3 divs पक्ष बनाना चाहता हूं जब उनमें से केवल एक दिखाई दे रहा है।

-------------- -------------- -------------- 
| visible | | invisible | | invisible | 
|   | |   | |   | 
-------------- -------------- -------------- 

ऐसा करने के लिए मैंने 100px चौड़ाई और छुपा ओवरफ्लो के साथ एक रैपिंग div बनाने की कोशिश की है। मैं क्या गलत कर रहा हूं?

<div style="width:50px;height:349px; overflow:hidden"> 
<div style="display: inline;">first div</div> 
<div style="display: inline;">second div</div> 
<div style="display: inline;">third div</div> 
</div> 

Answer 1

आपको सभी तीन divs को पकड़ने के लिए रैपिंग div को काफी बड़ा (चौड़ाई में) बनाना होगा। फिर आप ओवरफ्लो छुपा के साथ उस के चारों ओर एक और div लपेट सकते हैं।

Answer 2

आप display: inline पर एक तत्व पर चौड़ाई निर्धारित करने की कोशिश कर रहे हैं।

इसके बजाय inline-block आज़माएं।

Answer 3

display: inline आपको चौड़ाई निर्धारित करने की अनुमति नहीं देता है। आपको इसके बजाय display: inline-block का उपयोग करना चाहिए।

क्रॉस-ब्राउज़र मुद्दों:

• यह, IE, जो केवल स्वाभाविक रूप से inline तत्वों पर inline-block अनुमति देता है, इस तरह के रूप <span> के साथ ठीक से काम नहीं करेंगे, ताकि आप में <div> रों परिवर्तित कर सकते हैं या तो <span> s या, एक IE हैक का उपयोग करें: display:inline-block; zoom:1; *display:inline;

• और फ़ायरफ़ॉक्स v2 और निचले हिस्से के लिए, आप display: -moz-inline-stack; की आवश्यकता होगी।

Answer 4

तीन divs छोड़े गए। यही कारण है कि काम करेंगे

<div style="width:50px;height:349px; overflow:hidden; border solid 1px;"> 
    <div style="float:left;width:100px; border solid 1px">first div</div> 
    <div style="float:left;width:100px; border solid 1px;">second div</div> 
    <div style="float:left;width:100px; border solid 1px;">third div</div> 
</div> 

सही किया:

मैं बहुत माफी चाहता हूँ - मैं कुछ संपादन undid। मैंने उदाहरण दिखाने के लिए पैरेंट div पर चौड़ाई मानों को बदल दिया है - इसलिए कृपया इसे संपादित करें।

<div style="width:120px;height:349px; overflow:hidden; border: solid 1px;"> 
    <div style='height: 349px; width: 310px'> 
    <div style="float:left;width:100px; height: 100px; border: solid 1px">first div</div> 
    <div style="float:left;width:100px; height: 100px; border: solid 1px;">second div</div> 
    <div style="float:left;width:100px; height: 100px; border: solid 1px;">third div</div> 
    </div> 
</div>