2010-02-16 6 views
37

आप डीआईवी कैसे बनाते हैं जो एक-दूसरे के बगल में तैरते हैं, जब ब्राउजर का आकार बदलता है तो व्यूपोर्ट छोटा हो जाता है?ब्राउज़र को फिर से आकार देने पर फ़्लोट किए गए div तत्वों को लपेटने से कैसे रोक सकता है?

div { 
    float: left; 
} 

उदाहरण के लिए जब ब्राउज़र पूरी तरह से इस तरह div रों लाइन बड़ा किया गया है:

|div| |div| |div| |div| |div| |div| |div| |div| 

लेकिन जब ब्राउज़र को फिर से आकार में छोटे ऐसा होता है:

|div| |div| |div| |div| |div| 
|div| |div| |div| 

कैसे कर सकते हैं जब ब्राउज़र को फिर से आकार दिया जाता है तो मैं div नहीं लपेटता हूं?

उत्तर

25

उन्हें किसी अन्य div में लपेटें, जिसमें चौड़ाई (या न्यूनतम-चौड़ाई) निर्दिष्ट है। ऑटो युक्त div पर निर्दिष्ट किया है, उसकी ऊंचाई मैच के लिए बच्चे को तैरता अनुमति देने के लिए:

<div class="parentContainer"> 
    <div class="floater"></div> 
    <div class="floater"></div> 
    <div class="floater"></div> 
</div> 

.parentContainer { 
    /* The width of the parent needs to be equal to the total width of the children. 
    Be sure to include margins/padding/borders in the total. */ 
    width: 600px; 
    overflow: auto; 
} 

यह भी अतिप्रवाह के लिए मदद करता है।

+0

हो इस काम करने के लिए नहीं किया जा सका (http://jsfiddle.net/ajkochanowicz/tSpLx/) –

+0

@ajkochanowicz क्या आप के लिए काम नहीं कर रहा? जब मैं "परिणाम" विंडो का आकार 400px से कम करता हूं, तो फ्लोट विज्ञापन के रूप में उनके 3,3,2 कॉन्फ़िगरेशन में रहते हैं। – AaronSieb

+0

प्रत्येक div बाईं ओर तैरता है। मुझे नहीं पता कि "विज्ञापन" 3,3,2 कॉन्फ़िगरेशन क्या है। अगर वे सभी बाईं ओर तैरते हैं, तो वे क्षैतिज रूप से div को क्यों नहीं चलाते? –

9

उन्हें

.container { 
width: 500px; 
white-space: nowrap; 
overflow: visible/hidden/scroll - whichever suits you; 
} 
+0

जो 'फ्लोट-बाएं' बच्चों के मामले में नहीं है। –

+0

मैंने कंटेनर की चौड़ाई 100% तक सेट की - मेरे मामले में काम करता है। आपकी मदद कर सकता है –

7

चारों ओर कंटेनर div मुझे लगता है कि यह टेबल पर नफरत करने फैशनेबल है बनाओ, पर वे उपयोगी हो सकता है।
http://jsfiddle.net/td6Uw/
divs को तैरने के बजाय, उन्हें एक टेबल में रखें और तालिका को आकार-बाधित div के साथ लपेटें। टीआर रैपिंग को रोक देगा।
इसके अलावा, मैंने सेल स्टाइल को आसान बनाने के लिए टीडी के अंदर डीआईवी का उपयोग किया। यदि आप समय बिताते हैं तो आप टीडी को स्टाइल कर सकते हैं, लेकिन मुझे उन्हें स्टाइल करने में कठिनाई होती है और आमतौर पर उन्हें बाहर निकलना पड़ता है और बस मेरी पहेली द्वारा नियोजित डीवीवी-इन-टीडी विधि का उपयोग करें।

18

मैं खेल के लिए बहुत देर हो रही है, लेकिन यहाँ है कि मैं क्या पाया है कि काम करता है:

<nav> 
    <ul> 
     <li><a href="#">Example Link</a></li> 
     <li><a href="#">Example Link</a></li> 
     <li><a href="#">Example Link</a></li> 
    </ul> 
</nav> 

यह लिंक प्रदर्शित करने के लिए:

मान लीजिए कि आप एक नेविगेशन संरचित के रूप में करते हैं इनलाइन, कभी भी लपेटने के बिना, आप बस उपयोग कर सकते हैं:

nav ul { 
    white-space: nowrap; 
} 

nav ul li { 
    display: table-cell; 
} 

कोई निश्चित चौड़ाई या कुछ भी आवश्यक नहीं है।

फिडल: http://jsfiddle.net/gdf3prb4/

+0

यह आईएमओ का सबसे अच्छा तरीका है, और एकमात्र तरीका जो आसानी से काम करता है (कम से कम मेरे लिए)। एक निश्चित चौड़ाई के साथ एक रैपर div बनाने के अन्य तरीके अच्छी तरह से काम कर सकते हैं यदि आप जानते हैं कि आप कितने पिक्सल चाहते हैं, लेकिन आज की दुनिया में, जहां स्क्रीन आकार हमेशा अलग होते हैं, तो आप निश्चित चौड़ाई पर भरोसा नहीं करना चाहते हैं क्योंकि इससे बचाता है आप एक गतिशील वेबसाइट बनाने से। – edwardtyl

+1

यह विधि मेरी स्थिति के लिए सबसे प्रासंगिक थी (फ्लेक्सबॉक्स से कम जो अभी भी उन ब्राउज़र में एक क्रैपशूट का प्रतीत होता है जो हम समर्थन करना चाहते थे) - हालांकि मेरे मामले में मुझे पता चला कि मुझे 'डिस्प्ले: टेबल' की भी आवश्यकता है रैपर 'उल' कॉलम की मूल 100% ऊंचाई को रखने के लिए। इसके साथ, उस माता-पिता पर 'व्हाइट-स्पेस: ओट्रैप' या तो आवश्यक प्रतीत नहीं होता है, कॉलम की चौड़ाई वितरित होती है, वैसे भी 100% से अधिक नहीं है। – natevw

+0

@JacobTheDev निश्चित रूप से अधिक बेवकूफ और लचीली विधि, स्वीकार किया जाना चाहिए। खुशी है कि मैं आपको अपने अपवोट के साथ 5k अंक पर धक्का दे सकता हूं :-) – davnicwil

2

यह वास्तव में बहुत सरल है। कोड का उदाहरण:

Element { 
white-space: nowrap; 
} 
+0

समझ में नहीं आ रहा है कि यह नंबर 0 उत्तर 3 –

+0

क्यों नहीं है, यह था। यहां कुछ और काम नहीं किया। एफडब्ल्यूआईडब्ल्यू, मैंने इसे पैरेंट "div" -like तत्व पर रखा है। – Qix