2012-06-08 7 views
5

मेरे पास दो काफी संकीर्ण (चौड़ाई: 400 पीएक्स) divs हैं जिन्हें ब्राउज़र विंडो में पर्याप्त ऊर्ध्वाधर स्थान होने पर लंबवत रूप से ढेर किया जाना चाहिए। यदि ब्राउज़र की ऊंचाई बहुत छोटी है और दाईं ओर पर्याप्त जगह है, तो "नीचे div" शीर्ष div के दाईं ओर फ़्लोट होना चाहिए।सीएसएस: लंबवत स्थान उपलब्ध होने पर "फ्लोट: नीचे"। "फ्लोट: बाएं" अन्यथा

एक अर्थ में मैं "फ्लोट: बाएं" के विपरीत पूछ रहा हूं। फ्लोट: यदि ब्राउजर विंडो में पर्याप्त क्षैतिज स्थान है तो केवल क्षैतिज div को बाएं संरेखित करें और केवल नीचे दिए गए स्थान पर मौजूद अन्य लोगों के नीचे divs फ़्लोट करें।

किसी भी सुझाव के लिए धन्यवाद!

+1

क्या होगा यदि दाएं स्थान पर और नीचे की जगह भी हो? – Jashwant

+2

ऐसा नहीं लगता कि केवल सीएसएस के साथ ऐसा करने का एक तरीका है। मुझे लगता है कि आपको शायद कुछ जावास्क्रिप्ट शामिल करना होगा। खिड़की की ऊंचाई के लिए जेएस परीक्षण है और फिर गणना करें कि कितनी जगह है। फिर प्रत्येक div ('float: left; 'और/या' clear: दोनों;') –

+0

जशवंत: एक दूसरे के नीचे div को हमेशा रखना पसंद है। तो यह केवल इस मामले में है कि दाईं ओर स्थान है लेकिन नीचे नहीं, कि div2 div1 के दाईं ओर जाना चाहिए। –

उत्तर

8

का उपयोग ब्राउज़र समर्थन की आवश्यकता के स्तर के आधार पर चाहते हैं, एक सरल मीडिया क्वेरी आपकी समस्या का समाधान हो सकता है: In a tall window In a short window:

<!doctype html> 
<html> 
    <head> 
     <style> 
      /* SET THE DEFAULT RULES FOR SHORT SCREENS */ 
      .bottom-floaty { 
       height:200px; 
       width: 400px; 
       margin: 15px; padding: 10px; 
       outline: 1px dashed #aaf; 
       } 
      /* HERE FOLLOWS THE MAGICAL MEDIA QUERY FOR TALL SCREENS */ 
      @media all and (max-height: 500px) { 
       .bottom-floaty { float:left; } 
      } 
     </style> 
    </head> 
    <body> 
     <div class="bottom-floaty"> 
      I'm a sometimes floaty div 
     </div> 
     <div class="bottom-floaty"> 
      I'm also a sometimes floaty div 
     </div> 
    </body> 
</html> 

यहाँ प्रभाव मैं उस के साथ देखते हैं

CSS3 मीडिया प्रश्न आपको व्यूपोर्ट ऊंचाई के आधार पर पसंद करने वाले नियमों को सेट करने देते हैं। The w3c has lots of information about media queries.

व्यूपोर्ट ऊंचाई के बारे में एक प्रासंगिक स्निपेट:

'ऊंचाई' मीडिया सुविधा आउटपुट डिवाइस की लक्षित प्रदर्शन क्षेत्र के ऊंचाई वर्णन करता है। निरंतर मीडिया के लिए, यह व्यूपोर्ट की ऊंचाई है जिसमें एक रेंडर स्क्रॉल बार (यदि कोई हो) के आकार शामिल हैं। पेजेड मीडिया के लिए, यह पेज बॉक्स की ऊंचाई है।

निर्दिष्ट कोई नकारात्मक नहीं हो सकता है।

कभी-कभी मुझे मोज़िला डेवलपर नेटवर्क थोड़ा अधिक सुलभ लगता है, लेकिन इस मामले में वे basically the same information प्रदान करते हैं।

क्या आपको पुराने ब्राउज़र का समर्थन करने की आवश्यकता है जो मीडिया प्रश्न प्रस्तुत नहीं कर सकते हैं? जावास्क्रिप्ट polyfill लिखने के लिए यह काफी सरल होना चाहिए, विशेष रूप से jQuery जैसे लाइब्रेरी का उपयोग करना।

संपादित

मैं अपने कोड उदाहरण और अधिक बारीकी से आपकी समस्या को मैच के लिए संशोधित किया गया। आपने टिप्पणी की:

जशवंत: दूसरे के नीचे div डालना हमेशा पसंद किया जाता है। तो यह केवल इस मामले में है कि दाईं ओर स्थान है लेकिन नीचे नहीं, कि div2 div1 के दाईं ओर जाना चाहिए। - जोनास

और मैंने आपके उदाहरण के रूप में चौड़ाई 400px भी सेट की है।

अब यह केवल तभी छोड़ा जाता है जब स्क्रीन उनके लिए ऊर्ध्वाधर और होने के लिए बहुत छोटा हो, तो दोनों फिट करने के अधिकार पर पर्याप्त जगह है। अन्यथा यह हमेशा लंबवत है।

+0

धन्यवाद एक गुच्छा, फिल! फिर सब के बाद एक सुंदर समाधान था। अगर मैं कर सकता तो मैं तीन बार इस जवाब को उखाड़ फेंक दूंगा। बहुत गहन और टू-पॉइंट। –

3

यदि आप float:left; संपत्ति का उपयोग नहीं करना चाहते हैं, तो आपका प्रत्येक डीआईवी नई लाइन पर जाता है। तो फ्लोट बाएं संपत्ति का उपयोग करें। जब आप नई लाइन बस clear:both;

+2

यह एक अच्छा विचार है। –

+2

आपके सुझाव के लिए धन्यवाद, सारा। हालांकि, यह div2 को डिफॉल्ट के रूप में निचले स्तर पर रहने की इच्छा को हल नहीं करता है, लेकिन नीचे दाईं ओर कोई स्थान नहीं है और दाएं स्थान पर दाईं ओर तैरता है। ऐसा लगता है कि किसी को डेविड के जावास्क्रिप्ट सुझाव के साथ अपने प्रस्ताव पर निर्माण करना होगा (प्रश्न पर टिप्पणी देखें)। –