2014-09-11 21 views
8

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

मैं इसे कैसे हल कर सकता हूं?

विचार और समस्या

enter image description here

JSFIDDLE

आप निम्नलिखित jsfiddle को देखते हैं, आप देखते हैं कि यह छोटे परदे के लिए काम करता है, लेकिन समस्याओं न चाल बड़ी स्क्रीन पर ऊपर। मुझे पता है कि जिस तरह से मैं गलत करता हूं लेकिन मैं सीएसएस के साथ इस वांछित परिणाम कैसे प्राप्त कर सकता हूं?

http://jsfiddle.net/7rnum9xk/

.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; 
    }  
} 
+0

.clearfix – mabdrabo

+0

करना रंग का तत्व ऊंचाइयों तय कर दी है ध्यान देने का प्रयास की कोशिश करते हैं? –

+0

नहीं, प्रत्येक तत्व में गतिशील ऊंचाई होती है। बड़े और छोटे बक्से। – NLAnaconda

उत्तर

12

इस कोड DEMO

.main{ 
    width:65%; 
    height:125px; 
    margin-bottom:10px; 
    float:left; 
    display: inline-block; 
} 
.small{ 
    width:35%; 
    height:25px; 
    /* float:left; */ 
    display:inline-block; 
    margin-bottom:5px; 
} 

@media screen and (max-width: 692px) { 
    .main, .small{ 
     width:100%; 
     float:none; 
    } 

} 

/* colors */ 
.main{background:#d0d0d0;} 
.orange{background:#ecbd00;} 
.green{background:#6aec00;} 
.blue{background:#00c8ec;} 
.purple{background:#c300ec;} 
.red{background:#e93a73;} 
+0

वाहू!पहली नजर में आप दिन का नायक प्रतीत होता है! – NLAnaconda

+2

यह अच्छा है, +1 सिर्फ रंगीन तत्वों को हमेशा भूरे रंग से छोटे होते हैं: http://jsfiddle.net/webtiki/7rnum9xk/11/ –

-1

समस्या एचटीएमएल की संरचना है, तो आप छोटे divs के लिए हर के बाद मुख्य div डाल दिया है। तो यह पहले उस div को मुद्रित करने जा रहा है।

मैं जो सुझाव दूंगा वह इस तरह की HTML संरचना को बदल देगा;

बाएं कॉलम बाएं और दाएं कॉलम दाएं फ्लोट करें।

फिर चारों ओर

मीडिया सीएसएस जोड़ने के एक div चारों ओर जगह इतनी है कि 800px (या जो भी आप की आवश्यकता) आप display none;.hide800 इस पर छिप जाता है कर सकते हैं div, तो अपने वर्तमान एचटीएमएल चारों ओर एक div जोड़ने लेकिन एक इनलाइन शैली डाल पर प्रदर्शित करने के लिए कोई नहीं। फिर 800px (या जो भी आकार आप पहले div को छुपाते हैं) में सीएसएस को display: block !Important;

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

एचटीएमएल;

<div class="hide800"> 
    <div class="left-col"> 
    <div class="main"> 
    </div> 
    <div class="main"> 
    </div> 
    <div class="main"> 
    </div> 
    </div> 
    <div class-right-col"> 
    <div class="small orange"> 
    </div> 
    <div class="small green"> 
    </div> 
    <div class="small blue"> 
    </div> 
    <div class="small purple"> 
    </div> 
    <div class="small red"> 
    </div> 
    </div> 
</div> 
<div class="show800" style="display:none;"> 
<div class="main"> 
</div> 
<div class="small orange"> 
</div> 
<div class="small green"> 
</div> 

<div class="main"> 
</div> 
<div class="small blue"> 
</div> 
<div class="small purple"> 
</div> 

<div class="main"> 
</div> 
<div class="small red"> 
</div> 
</div> 

सीएसएस;

.left-col { 
float: left; 
} 
.right-col { 
float: right; 
} 
@media screen and(max-width:800px){ 
.hide800 { 
display: none; 
} 
.show800 { 
display: block !Important; 
} 
} 

तुम मुझे आगे की व्याख्या करने की जरूरत है मुझे पता है :)

+0

लेकिन इसका मतलब है कि मुझे हर छोटे तत्व को दो बार उत्पन्न करना है? Show800 में एक बार और hide800 तत्वों के लिए एक बार? (अगर मैं गलत हूं तो मुझे सही करें) मैं एक समाधान प्राप्त करने की उम्मीद कर रहा था जिसके लिए डबल सामग्री उत्पन्न करने की आवश्यकता नहीं है। – NLAnaconda

+0

मुझे लगता है कि डुप्लिकेटिंग सामग्री या तो अच्छी नहीं है। मैं इसी तरह की स्थिति में हूं। आइसोटोप जैसी पुस्तकालयों के बारे में क्या? –

+0

ठीक है कोई समस्या नहीं, क्षमा करें मैं और अधिक मदद नहीं कर सका। – Jay

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