शेष चौड़ाई को भरने के लिए एक div बनाओ

Question 1

मैं शेष भाग को भरने के लिए एक div कैसे बना सकता हूं?

<div id="Main" style="width: 500px;">
    <div id="div1" style="width: 100px;"></div>
    <div id="div2"></div>
    <div id="div3" style="width: 100px; float: right;"></div>
</div>

div2शेष को भरने के लिए मुझे कैसे मिल सकता है ?

Question 2

कुछ इस तरह की कोशिश करो:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

डिव स्वाभाविक रूप से अपने कंटेनर की 100% चौड़ाई लेंगे, इस चौड़ाई को स्पष्ट रूप से निर्धारित करने की कोई आवश्यकता नहीं है। बाएं / दाएं मार्जिन को दो साइड डिविजन के समान जोड़कर, यह स्वयं की सामग्री को उनके बीच बैठने के लिए मजबूर किया जाता है।

ध्यान दें कि HTML में "राइट डिव" के बाद "मिडल डिवा" जाती है

Question 3

अप-टू-डेट समाधान (अक्टूबर 2014): द्रव लेआउट के लिए तैयार

परिचय:

यह समाधान द्वारा प्रदान किए गए से भी सरल है Leigh। यह वास्तव में इस पर आधारित है।

यहाँ आप देख सकते हैं कि मध्यम तत्व (हमारे मामले में, के साथ "content__middle"वर्ग) करता नहीं किसी भी आयामी संपत्ति निर्दिष्ट है - सभी में कोई चौड़ाई, और न ही गद्दी, और न ही मार्जिन संबंधित संपत्ति - लेकिन केवल एक overflow: auto;(नोट 1 देखें)।

बड़ा फायदा है कि अब है कि आप एक निर्दिष्ट कर सकते हैं max-widthऔर एक min-widthअपने बाएँ और सही तत्वों को । जो द्रव लेआउट के लिए शानदार है .. इसलिए उत्तरदायी लेआउट :-)

नोट 1: लेह के उत्तर के विरुद्ध जहां आपको कक्षा में margin-left& margin-rightगुण जोड़ने की आवश्यकता है "content__middle"।

गैर-द्रव लेआउट वाला कोड:

यहाँ बाएं और दाएं तत्वों (वर्गों के साथ "content__left"और "content__right") एक है निश्चित चौड़ाई इसलिए कहा जाता गैर द्रव लेआउट: (पिक्सेल में)।

Http://jsbin.com/qukocefudusu/1/edit?html,css,output पर लाइव डेमो

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content {
        width: 100%;
    }
    .content__left {
        width: 100px;
        float: left; /* [1] */
        background-color: #fcc;
    }
    .content__middle {
        background-color: #cfc;
        overflow: auto; /* [2] */
    }
    .content__right {
        width: 100px;
        float: right; /* [3] */
        background-color: #ccf;
    }
</style>

<div class="content">
    <div class="content__left">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

द्रव लेआउट के साथ कोड:

यहाँ बाएं और दाएं तत्वों (वर्गों के साथ "content__left"और "content__right") एक है परिवर्तनीय चौड़ाई (प्रतिशत में) लेकिन यह भी एक न्यूनतम और अधिकतम चौड़ाई: इसलिए तरल पदार्थ लेआउट कहा जाता है।

max-widthगुणों के साथ एक द्रव लेआउट में लाइव डेमो http://jsbin.com/runahoremuwu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content { 
        width: 100%; 
    }
    .content__left { 
        width: 20%; 
        max-width: 170px;  
        min-width: 40px;  
        float: left; /* [1] */
        background-color: #fcc; 
     }
    .content__middle { 
        background-color: #cfc; 
        overflow: auto; /* [2] */
    }
    .content__right { 
        width: 20%; 
        max-width: 250px; 
        min-width: 80px; 
        float: right; /* [3] */
        background-color: #ccf; 
    }
</style>

<div class="content">
    <div class="content__left">
        max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

ब्राउज़र का समर्थन

निम्न वेब ब्राउज़र पर BrowserStack.com पर परीक्षण किया गया:

IE7 से IE11
एफएफ 20, एफएफ 28
सफारी 4.0 (विंडोज़ एक्सपी), सफारी 5.1 (विंडोज़ एक्सपी)
Chrome 20, Chrome 25, Chrome 30, Chrome 33,
ओपेरा 20

Question 4

फ्लेक्स-बॉक्स समाधान हैं - और वे शानदार हैं। मैं एक दशक के लिए सीएसएस से कुछ इस तरह से चाह रहा हूं। आपको केवल display: flex"मेन" के लिए अपनी शैली में जोड़ना है और flex-grow: 100(जहां 100 मनमाना है - यह महत्वपूर्ण नहीं है कि यह बिल्कुल 100 हो)। इस शैली को जोड़ने का प्रयास करें (रंगों को प्रभाव दिखाने के लिए जोड़ा गया):

<style>
    #Main {
        background-color: lightgray;
        display: flex;
    }

    #div1 {
        border: 1px solid green;   
        height: 50px; 
        display: inline-flex; 
    }
    #div2 {
        border: 1px solid blue;    
        height: 50px;
        display: inline-flex;
        flex-grow: 100;
    }
    #div3 {
        border: 1px solid orange;        
        height: 50px;
        display: inline-flex;
    }
</style>

फ्लेक्स बॉक्स के बारे में अधिक जानकारी यहाँ: https://css-tricks.com/snippets/css/a-guide-to-lexlexbox/

Question 5

का प्रयोग करें सीएसएस flexbox flex-grow इस लक्ष्य को हासिल करने के लिए संपत्ति।

.main {
  display: flex;
}
.col-1, .col-3 {
  width: 100px;
}
.col-2 {
  flex-grow: 1;
}

<div class="main">
  <div class="col-1" style="background: #fc9;">Left column</div>
  <div class="col-2" style="background: #eee;">Middle column</div>
  <div class="col-3" style="background: #fc9;">Right column</div>
</div>

स्निपेट का विस्तार करें

Question 6

हालांकि एक bitउत्तर पोस्ट करने में देर हो गई, यहां मार्जिन का उपयोग किए बिना एक वैकल्पिक दृष्टिकोण है।

<style>
    #divMain { width: 500px; }
    #div1 { width: 100px; float: left; background-color: #fcc; }
    #div2 { overflow:hidden; background-color: #cfc; }
    #div3 { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="div1">
        div 1
    </div>
    <div id="div3">
        div 3
    </div>
    <div id="div2">
        div 2<br />bit taller
    </div>
</div>

यह विधि जादू की तरह काम करती है, लेकिन यहाँ एक स्पष्टीकरण है:)

यहां एक समान नमूने के साथ फिडल।

Question 7

जिस Div को शेष स्थान लेना है, उसे एक वर्ग होना है .. अन्य div में id (s) हो सकते हैं, लेकिन उनके पास चौड़ाई होनी चाहिए ..

सीएसएस :

#main_center {
    width:1000px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    display:block;
}
#left {
    width:200px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    background:#c6f5c6;
    float:left;
}
.right {
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    overflow:hidden;
    background:#000fff;
}
.clear {
    clear:both;
}

HTML :

<body>
    <div id="main_center">
        <div id="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>

निम्न लिंक में कोड इन एक्शन है, जिसे शेष क्षेत्र कवरेज समस्या को हल करना चाहिए।

jsFiddle

Question 8

मैं विपरीत समस्या के समाधान की तलाश में था जहाँ मुझे केंद्र में एक निश्चित चौड़ाई div और दोनों तरफ एक द्रव चौड़ाई div की आवश्यकता थी, इसलिए मैं निम्नलिखित के साथ आया और सोचा कि मैं इसे यहाँ पोस्ट करूँगा अगर किसी को इसकी आवश्यकता है।

#wrapper {
  clear: both;
  width: 100%;
}

#wrapper div {
  display: inline-block;
  height: 500px;
}

#center {
  background-color: green;
  margin: 0 auto;
  overflow: auto;
  width: 500px;
}

#left {
  float: left;
}

#right {
  float: right;
}

.fluid {
  background-color: yellow;
  width: calc(50% - 250px);
}

<div id="wrapper">
  <div id="center">
    This is fixed width in the centre
  </div>
  <div id="left" class="fluid">
    This is fluid width on the left
  </div>
  <div id="right" class="fluid">
    This is fluid width on the right
  </div>
</div>

स्निपेट का विस्तार करें

यदि आप #centerतत्व की चौड़ाई बदलते हैं तो आपको .fluidनिम्न की चौड़ाई की संपत्ति को अद्यतन करने की आवश्यकता है:

width: calc(50% - [half of center width]px);