का उपयोग ब्राउज़र समर्थन की आवश्यकता के स्तर के आधार पर चाहते हैं, एक सरल मीडिया क्वेरी आपकी समस्या का समाधान हो सकता है: :
<!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 भी सेट की है।
अब यह केवल तभी छोड़ा जाता है जब स्क्रीन उनके लिए ऊर्ध्वाधर और होने के लिए बहुत छोटा हो, तो दोनों फिट करने के अधिकार पर पर्याप्त जगह है। अन्यथा यह हमेशा लंबवत है।
क्या होगा यदि दाएं स्थान पर और नीचे की जगह भी हो? – Jashwant
ऐसा नहीं लगता कि केवल सीएसएस के साथ ऐसा करने का एक तरीका है। मुझे लगता है कि आपको शायद कुछ जावास्क्रिप्ट शामिल करना होगा। खिड़की की ऊंचाई के लिए जेएस परीक्षण है और फिर गणना करें कि कितनी जगह है। फिर प्रत्येक div ('float: left; 'और/या' clear: दोनों;') –
जशवंत: एक दूसरे के नीचे div को हमेशा रखना पसंद है। तो यह केवल इस मामले में है कि दाईं ओर स्थान है लेकिन नीचे नहीं, कि div2 div1 के दाईं ओर जाना चाहिए। –