ब्राउज़र को फिर से आकार देने पर फ़्लोट किए गए div तत्वों को लपेटने से कैसे रोक सकता है?

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

div { 
    float: left; 
}

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

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

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

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

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

स्रोत

2010-02-16 Mark

उन्हें किसी अन्य 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; 
}

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

स्रोत

2010-02-16 18:05:57 AaronSieb

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

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

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

उन्हें

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

स्रोत

2010-02-16 18:10:22 easwee

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

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

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

स्रोत

2012-05-17 12:26:01 dlchambers

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

<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/

स्रोत

2014-11-25 22:28:47 JacobTheDev

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

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

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

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

Element { 
white-space: nowrap; 
}

स्रोत

2016-11-07 02:00:14 derpymelon

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

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

ब्राउज़र को फिर से आकार देने पर फ़्लोट किए गए div तत्वों को लपेटने से कैसे रोक सकता है?

उत्तर

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