2010-08-30 4 views
5

को लपेटकर से divs जारी यहाँ मेरी साइट, सब से पहले है:रोकें अगली पंक्ति

www.kaiserroof.com/test/index2.html

तो यहाँ मेरी समस्या है। आप देखेंगे कि पृष्ठ के मध्य में विभाजक बार के नीचे, तीन कॉलम हैं, एक फॉर्म के साथ, एक टेक्स्ट के साथ, एक लिंक के साथ। अब, विंडो को थोड़ा छोटा आकार दें, और दायां div अगली पंक्ति में गिर जाएगी। क्या इसे प्रदर्शित करने के लिए वैसे भी है? तो, वे divs समायोजित करेंगे (मेरे पास एक तरल लेआउट है) जहां तक ​​वे फिट नहीं होंगे, फिर, div को अगली पंक्ति में लपेटने के बजाय, यह प्रदर्शित नहीं होगा?

मुझे उम्मीद है कि यह समझ में आता है। किसी भी तरह की सहायता का स्वागत किया जाएगा।

+0

फ्लैश अधिभार: हालांकि, वहाँ, न्यूनतम-चौड़ाई संपत्ति का अनुकरण करने के लिए यदि आप पुराने आईईएस समर्थन करने की आवश्यकता के कई तरीके हैं! – alex

उत्तर

8

आप इसे केवल सीएसएस के साथ भी प्राप्त कर सकते हैं। ,

#row4 { 
    min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */ 
    overflow:hidden; 
} 

यह आपके इरादा समाधान से थोड़ी अलग है के बाद से सही बॉक्स जब नीचे खिड़की आकार आंशिक रूप से दृश्यमान रहेगी और तुरंत पूरी तरह से गायब नहीं होगा:

बस निम्नलिखित सीएसएस # row4 को जिम्मेदार बताते हैं आवंटित।

कृपया ध्यान रखें कि न्यूनतम चौड़ाई आईई 6 में काम नहीं करेगी।

http://www.thecssninja.com/xhtml/ie6-min-width-solutions

1

आपको व्यूपोर्ट की चौड़ाई प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग करना होगा, फिर डिस्प्ले करने के लिए लपेटने वाले div की डिस्प्ले प्रॉपर्टी को बदलना होगा: ऐसा नहीं है कि जब ब्राउज़र की चौड़ाई बहुत छोटी हो तो यह दिखाई न दे।

2

आप उन्हें एक न्यूनतम चौड़ाई सेट के साथ एक रैपर div दे सकते हैं और इसे क्षैतिज स्क्रॉलबार का उपयोग करने के लिए मजबूर कर सकते हैं यदि यह बहुत छोटा हो जाता है। एक रैपर div के बारे में अच्छी बात यह है कि आप इसे अधिकतम चौड़ाई भी दे सकते हैं और चीजों को सुपर विशाल मॉनीटर पर जीतने से रोक सकते हैं।

मैं क्षैतिज स्क्रॉलबार का प्रशंसक नहीं हूं, लेकिन यह पूरी तरह से सामग्री को हटा देता है।

2

ठीक है यहाँ क्या आप

लपेटें तीनों इस

<div id="parent"> 
    <div class="form">......</div> 
    <div class="text">......</div> 
    <div class="links">.....</div> 
</div> 

अब की तरह एक माता पिता div पर जारी विभाजन करना चाहिए, कुछ हल करने के लिए आपकी समस्या parent div

की तरह करने के लिए एक निश्चित ऊंचाई देना है
#parent { height:400px;clear:both; }