दिव्यांगों को कैसे जगह दी जाए

Question

मेरे पास एक मुख्य आवरण div है जो 100% चौड़ाई निर्धारित है। अंदर कि मैं दो divs करना चाहते हैं, एक है जो निश्चित चौड़ाई है और दूसरा जो बाकी जगह को भरता है। मैं बाकी हिस्सों को भरने के लिए दूसरी div कैसे तैरता हूं। किसी भी मदद के लिए धन्यवाद।

Comments

अगली बार अपना उदाहरण कोड भी दें ताकि प्रश्न यहाँ के डेवलपर्स के लिए स्पष्ट हो जाए ..

— Rob

स्थिति है: निरपेक्ष एक विकल्प? आप कंटेनर के किनारों पर स्थिति सेट कर सकते हैं, और div नया आकार लेगा।

— अलेक्जेंडर

Answer 1

आपके द्वारा पूछे जाने वाले कार्य करने के कई तरीके हैं:

1. CSS floatसंपत्ति का उपयोग करना :

   <div style="width: 100%; overflow: hidden;">
       <div style="width: 600px; float: left;"> Left </div>
       <div style="margin-left: 620px;"> Right </div>
   </div>

2. सीएसएस displayसंपत्ति का उपयोग करना - जिसका उपयोग divए जैसे कार्य करने के लिए किया जा सकता है table:

   <div style="width: 100%; display: table;">
       <div style="display: table-row">
           <div style="width: 600px; display: table-cell;"> Left </div>
           <div style="display: table-cell;"> Right </div>
       </div>
   </div>

अधिक विधियां हैं, लेकिन वे दो सबसे लोकप्रिय हैं।

Comments

@Filoxo से HTML 5 समाधान, इसके बजाय का उपयोग करें

— TheMcMurder

पिछले टिप्पणीकार ने क्या कहा: # 3 के रूप में प्रति फिलॉक्से में एचटीएमएल 5 समाधान जोड़ने पर विचार करें।

— अहमद फ़सीह

@ TheMcMurder: हमारे लिए जिन्हें पुराने ब्राउज़र (जैसे IE <11) का समर्थन करने की आवश्यकता है, वह विकल्प नहीं है।

— ओविंद

@ ओविंद, तुम बिल्कुल सही कह रहे हो। यह आपके उपयोग के मामले पर निर्भर करता है। आप IE 8, 9 समर्थन कर रहे हैं, या 10 आप polyfill समर्थन करने के लिए होगा अगर मैं polyfill.io की तरह एक सेवा की सलाह देते हैं cdn.polyfill.io/v2/docs या github.com/10up/flexibility लेकिन तुम सच में सख्त हो सकता है ऐसी आवश्यकताएं जो पॉलीफिल के उपयोग को रोकती हैं।

— theMcMurder

अतिप्रवाह क्या होता है: छिपा हुआ? एक निर्दिष्ट ऊंचाई वाले तत्वों के लिए यह नहीं है?

— माइकल

Answer 2

CSS3 ने लचीले बक्से (उर्फ फ्लेक्स बॉक्स) पेश किए जो इस व्यवहार को भी प्राप्त कर सकते हैं।

बस पहली div की चौड़ाई को परिभाषित करें, और फिर दूसरे को एक flex-growमान 1दें जिससे वह माता-पिता की शेष चौड़ाई को भर सके।

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}

<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

jsFiddle डेमो

ध्यान दें कि फ्लेक्स बॉक्स पुराने ब्राउज़रों के साथ संगत नहीं हैं, लेकिन आधुनिक ब्राउज़रों को लक्षित करने के लिए एक बढ़िया विकल्प है ( Caniuse और MDN भी देखें )। फ्लेक्स बॉक्स का उपयोग करने के बारे में एक महान व्यापक मार्गदर्शिका सीएसएस ट्रिक्स पर उपलब्ध है ।

Comments

इसका समाधान खोजने में पूरा दिन लग गया और इस उत्तर ने इसे हल कर दिया! मेरे पास 4 पैनल हैं जो तीसरे और चौथे पैनल के साथ हैं, कभी-कभी उनमें कुछ भी नहीं होता है। वे सभी अपने आस-पास की सीमा के साथ युक्त div में रहते हैं। पूरी फ्लोट: पहली div स्थिति पर छोड़ दिया मुझे एक div के साथ नीचे सीमा पर अतीत जा रहा है क्योंकि उत्पन्न लेबल गतिशील हैं। लेबल स्पैन cuz हैं कि एएसपी उन्हें कैसे प्रदान करता है। फ्लोट न होना: एक ही पंक्ति में 3 में से केवल 3 बचे। और तालिका का उपयोग करना प्रश्न से बाहर है। धन्यवाद!

— चमकदार

क्या इस तरह से कुछ का उपयोग करने के लिए एक बैकवर्ड संगत विधि है, अर्थात हमारे लिए गरीब सैप जो अभी भी IE 8-10 का समर्थन करना चाहते हैं

— बेन ए। हिलेली

@ BenA.Hilleli अपनी आवश्यकताओं पर निर्भर हो सकता है कि (जैसे। प्रगतिशील वृद्धि या मनोहर पतन ), लेकिन एक त्वरित खोज इस झुकेंगे (बाहर दिनांकित एक बिट) "कैसे वास्तविक दुनिया में flexbox उपयोग करने के लिए" गाइड के साथ-साथ Flexie.js जो IE6-9 का समर्थन करता है। वैकल्पिक रूप से, इस प्रश्न के लिए किसी भी अन्य उत्तर को आज़माएं क्योंकि वे एक ही चीज़ को प्राप्त करते हैं।

— फाइलोक्सो

Answer 3

मुझे HTML और CSS डिजाइन रणनीतियों के बारे में अधिक जानकारी नहीं है, लेकिन यदि आप कुछ सरल खोज रहे हैं और वह स्क्रीन अपने आप फिट हो जाएगी (जैसा कि मैं हूं) मेरा मानना ​​है कि सबसे सीधा फॉरवर्ड सॉल्यूशन है जिससे divs को शब्दों के रूप में व्यवहार करना है एक पैरा। निर्दिष्ट करने का प्रयास करेंdisplay: inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

आपको DIV की चौड़ाई निर्दिष्ट करने की आवश्यकता हो सकती है या नहीं भी हो सकती है

Comments

संभवतः display:flexसबसे अच्छा समाधान है, लेकिन मुझे लगता inline-blockहै कि यह भी उत्कृष्ट है क्योंकि यह अधिक ब्राउज़रों पर काम करता है। वैसे, आपको <div style="white-space:nowrap">आकार बदलने पर रोक लगाने के लिए दोनों डिव को लपेटने की आवश्यकता हो सकती है ।

— जॉन हेनकेल

यह टेम्प्लेटिंग के लिए अच्छा उपाय है। एकमात्र मुद्दा यह है कि यह एक div को कम सामग्री के साथ नीचे की ओर धकेलता है। इसे शीर्ष पर कैसे धकेलें?

— लगभग एक शुरुआती

एनवीएम, बस इसे खोजने की जरूरत है, समाधान है: ऊर्ध्वाधर-संरेखित: शीर्ष;

— लगभग एक शुरुआती

@ जॉनहैंकेल का मतलब है कि यह सभी ब्राउज़रों के लिए नहीं है, क्या यह सभी ब्राउज़रों के लिए एक ही तरह से काम नहीं कर सकता है? inline-blockकोड।

— काविन्दु गायन्था

@guillermo यह अच्छी तरह से काम नहीं कर रहा है। सभी divs कंधे से कंधा मिलाकर नहीं चल रहे हैं। ऐसा क्यों है। यह स्पष्ट नहीं है।

— काविन्दु गायन्था

Answer 4

इसे प्राप्त करने के लिए आप CSS ग्रिड का उपयोग कर सकते हैं, यह चित्रण के प्रयोजनों के लिए लंबे समय तक चलने वाला संस्करण है:

div.container {
    display: grid;
    grid-template-columns: 220px 20px auto;
    grid-template-rows: auto;
}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    background-color: Aqua;
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
    background-color: Silver;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="below">Below</div>
</div>

या फ्लोट और मार्जिन का उपयोग करके अधिक पारंपरिक विधि।

मैंने इस उदाहरण में एक पृष्ठभूमि रंग शामिल किया है, जहां यह दिखाने में मदद की जाती है कि चीजें कहां हैं - और यह भी कि फ्लोटेड-एरिया के नीचे की सामग्री का क्या करना है।

वास्तविक जीवन में अपनी शैलियों को इनलाइन न करें, उन्हें स्टाइल शीट में निकालें।

div.left {
    width: 200px;
    float: left;
    background-color: Aqua;
}

div.right {
    margin-left: 220px;
    background-color: Silver;
}

div.clear {
    clear: both;
}

    <div class="left"> Left </div>
    <div class="right"> Right </div>
    <div class="clear">Below</div>

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>

Answer 5

पहली डिव को एक फ्लोट बायीं और तय करें, दूसरी डिव 100% चैड़ाई फ्लोट बचे। यह ट्रिक काम आना चाहिए। यदि आप इसके नीचे आइटम रखना चाहते हैं, तो आपको एक स्पष्ट चीज़ चाहिए: दोनों उस आइटम पर जिसे आप नीचे रखना चाहते हैं

Answer 6

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

यह क्रॉस ब्राउज़र संगत होगा। यदि आप सामग्री अपने साइडबार की तुलना में लंबा है तो मार्जिन-लेफ्ट के बिना आप बाईं ओर सभी तरह से चलने वाली सामग्री के साथ मुद्दों पर चलेंगे।

Answer 7

यदि आप IE6 को टैग नहीं कर रहे हैं, तो दूसरा फ़्लोट करें <div>और इसे पहले <div>की निश्चित चौड़ाई के बराबर (या शायद थोड़ा बड़ा) के बराबर मार्जिन दें ।

HTML:

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

सीएसएस:

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

मार्जिन इस संभावना के लिए जिम्मेदार है कि 'रेस्ट-ऑफ-स्पेस' <div>में 'निश्चित-चौड़ाई' की तुलना में अधिक सामग्री हो सकती है <div>।

निश्चित चौड़ाई को पृष्ठभूमि न दें; अगर आपको इन्हें अलग-अलग 'कॉलम' के रूप में देखना है, तो फॉक्स कॉलम ट्रिक का उपयोग करें ।