मैं एक उत्तरदायी लेआउट बनाना चाहता हूं जहां दो कॉलम, बाएं और दाएं हैं। छोटी स्क्रीन पर बाईं तरफ के बक्से को कुछ स्थितियों में स्थानांतरित करना होता है। यह मेरे कोड के साथ बहुत अच्छा काम करता है लेकिन समस्या यह है कि बड़ी स्क्रीन पर बक्से के बीच दाएं तरफ एक अंतर होता है।सीएसएस, उत्तरदायी, फ़्लोटिंग बक्से बनाएं
मैं इसे कैसे हल कर सकता हूं?
विचार और समस्या
JSFIDDLE
आप निम्नलिखित jsfiddle को देखते हैं, आप देखते हैं कि यह छोटे परदे के लिए काम करता है, लेकिन समस्याओं न चाल बड़ी स्क्रीन पर ऊपर। मुझे पता है कि जिस तरह से मैं गलत करता हूं लेकिन मैं सीएसएस के साथ इस वांछित परिणाम कैसे प्राप्त कर सकता हूं?
.main{
width:65%;
height:125px;
margin-bottom:10px;
float:left;
}
.small{
width:35%;
height:25px;
float:left;
margin-bottom:5px;
}
@media screen and (max-width: 692px) {
.main, .small{
width:100%;
float:none;
}
}
.clearfix – mabdrabo
करना रंग का तत्व ऊंचाइयों तय कर दी है ध्यान देने का प्रयास की कोशिश करते हैं? –
नहीं, प्रत्येक तत्व में गतिशील ऊंचाई होती है। बड़े और छोटे बक्से। – NLAnaconda