फ़िट div (चौड़ाई) चल divs

Question

मैं अब घंटे के लिए खोज की है और मेरी समस्या के लिए समस्या का समाधान नहीं मिल सकता है, तो मैं क्या आप मुझे कुछ सलाह दे सकते हैं चारों ओर।

क्या मैं चाहता हूँ एक div कि कुछ चल divs अंदर इर्द-गिर्द घूमती है। ऊंचाई को लपेटना मुझे कोई समस्या नहीं है, लेकिन अगर ब्राउज़र को चौड़ाई में बदल दिया जाता है, तो चौड़ाई सही नहीं होती है, जहां फ़्लोटिंग तत्व नीचे उतरते हैं।

यहाँ कुछ उदाहरण कोड:

HTML:

<div class="wrapper"> 

    <div class="block1"> 
    </div> 

    <div class="block2"> 
    </div> 
</div> 

सीएसएस:

body { 
    border: solid 1px green; 
} 

.wrapper { 
    border: solid 1px red; 
    display: table; 
} 

div { 
    display: block; 
} 

.block1 { 
    float: left; 
    width: 390px; 
    height: 390px; 
    background-color: blue; 
} 

.block2 { 
    float: left; 
    width: 390px; 
    height: 390px; 
    background-color: yellow; 
} 

तो बुनियादी तौर पर मैं चाहता हूँ रैपिंग div हमेशा चौड़ाई कि divs अंदर आवश्यकता पड़ सकती है। खिड़की का आकार बदलकर और दाईं ओर दाईं ओर कूदने के लिए रैपिंग div को इस उदाहरण के लिए 390px की चौड़ाई चाहिए।

मैं मैं करने के लिए कोशिश कर रहा हूँ एक संवेदनशील वेबसाइट के लिए इस समाधान की जरूरत है और मैं जितनी जल्दी हो सके इसकी आवश्यकता है।

एक शुद्ध सीएसएस समाधान पसंद किया जाएगा, लेकिन जे एस या jQuery भी करना होगा।

Answer 1

क्या आप "डेस्कटॉप" पर div 780px को रखने के लिए चौड़ाई या न्यूनतम चौड़ाई का उपयोग करते हैं और फिर निचले स्क्रीन चौड़ाई पर जो ब्लॉक को लपेटने का कारण बनते हैं, माता-पिता की चौड़ाई को 390px पर सेट करें। उपयुक्त मीडिया प्रश्नों में इन लपेटें और अपने चाचा bobs .....

HTH

Answer 2

जावास्क्रिप्ट अत्यधिक एक ही रास्ता होने की संभावना है ...

$(window).resize

और का उपयोग कर: Javascript Browser Width

एक बार जब आप ब्राउज़र की चौड़ाई को जानते हैं तो आप उपलब्ध स्थान को विभाजित कर सकते हैं और रैपर div की चौड़ाई निर्दिष्ट कर सकते हैं, इस प्रकार अपने फ़्लोटिंग divs को लपेटते हैं।

Answer 3

.wrapper

Answer 4

आप आवरण div पर एक सीएसएस मीडिया क्वेरी का उपयोग कर सकते करने के लिए

white-space: nowrap; 

जोड़ें।इसलिए जैसा:

@media (max-width: 783px) { 
.wrapper { 
    max-width: 390px; 
    } 
} 

एक उदाहरण के लिए this codepen देखें:

Answer 5

कैसे के बारे में इस वर्ग के

.wrapper { 
border: solid 1px red; 
display:table; 
**white-space:nowrap;** 
} 

संशोधित

या हो सकता है अगर आप छोड़ दिया div ठीक करने के लिए, चाहते हैं, इसलिए यदि विंडो का आकार परिवर्तन केवल सही div का आकार बदल जाएगा

इसे सही div के लिए बनाएं:

आपकी सहायता के हर किसी के लिए

display: block; 
position: absolute; 
top:0; 
right:0; 
margin-left: *your_fixed_left* px; 

Answer 6

Thx,

मैं विंडो का आकार पढ़ने और आवरण चौड़ाई मैन्युअल स्थापना करके कुछ जावास्क्रिप्ट के साथ यह कर समाप्त हो गया।

धन्यवाद!

Answer 7

<div class="wrapper"> 

    <div style="display:table-row"> 

     <div class="block1"> 
     </div> 

     <div class="block2"> 
     </div> 

    </div> 

</div> 



.wrapper { 

    border: solid 1px red; 
    display: table; 

} 

.block1 { 

    display:table-cell; 
    width: 390px; 
    height: 390px; 
    background-color: blue; 

} 

.block2 { 

    display:table-cell; 
    width: 390px; 
    height: 390px; 
    background-color: yellow; 

}