द्रव बाएं और निश्चित दाएं कॉलम के साथ दो कॉलम डिव लेआउट

Question

मैं डीआईवी का उपयोग करके दो कॉलम लेआउट बनाना चाहता हूं, जहां सही कॉलम में 200px की निश्चित चौड़ाई होगी और बायां एक शेष स्थान ले जाएगा।

यह काफी आसान है अगर आप तालिकाओं का उपयोग:

<table width="100%"> 
    <tr> 
    <td>Column 1</td> 
    <td width="200">Column 2 (always 200px)</td> 
    </tr> 
</table> 

लेकिन यह कैसे DIVs के बारे में? क्या यह पूरा करना संभव है? यदि हां, तो कैसे?

Answer 1

निम्नलिखित उदाहरण स्रोत ऑर्डर किए गए हैं यानी कॉलम 1 HTML स्रोत में कॉलम 2 से पहले प्रकट होता है।एक स्तंभ पर दिखाई देता है चाहे बाएं या दाएं सीएसएस द्वारा नियंत्रित किया जाता:

फिक्स्ड सही

#wrapper { 
 
    margin-right: 200px; 
 
} 
 
#content { 
 
    float: left; 
 
    width: 100%; 
 
    background-color: #CCF; 
 
} 
 
#sidebar { 
 
    float: right; 
 
    width: 200px; 
 
    margin-right: -200px; 
 
    background-color: #FFA; 
 
} 
 
#cleared { 
 
    clear: both; 
 
}

<div id="wrapper"> 
 
    <div id="content">Column 1 (fluid)</div> 
 
    <div id="sidebar">Column 2 (fixed)</div> 
 
    <div id="cleared"></div> 
 
</div>

फिक्स्ड वाम

#wrapper { 
 
    margin-left: 200px; 
 
} 
 
#content { 
 
    float: right; 
 
    width: 100%; 
 
    background-color: #CCF; 
 
} 
 
#sidebar { 
 
    float: left; 
 
    width: 200px; 
 
    margin-left: -200px; 
 
    background-color: #FFA; 
 
} 
 
#cleared { 
 
    clear: both; 
 
}

<div id="wrapper"> 
 
    <div id="content">Column 1 (fluid)</div> 
 
    <div id="sidebar">Column 2 (fixed)</div> 
 
    <div id="cleared"></div> 
 
</div>

वैकल्पिक समाधान display: table-cell का उपयोग करना है; जिसके परिणामस्वरूप समान ऊंचाई कॉलम होते हैं।

Answer 2

सीएसएस Solutuion

#left{ 
    float:right; 
    width:200px; 
    height:500px; 
    background:red; 
} 

#right{ 
    margin-right: 200px; 
    height:500px; 
    background:blue; 
} 

चेक काम कर उदाहरण http://jsfiddle.net/NP4vb/3/

jQuery समाधान

var parentw = $('#parent').width(); 
var rightw = $('#right').width(); 
$('#left').width(parentw - rightw); 

चेक काम कर उदाहरण पर http://jsfiddle.net/NP4vb/

Answer 3

मुझे हाल ही में सीएसएस का उपयोग कर तरल लेआउट के लिए इस वेबसाइट को दिखाया गया था। http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts (नीचे दिए गए लिंक में डेमो पृष्ठों पर नज़र डालें)।

लेखक अब निश्चित चौड़ाई लेआउट के लिए एक उदाहरण प्रदान करता है। चेक आउट; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width।

यह निम्नलिखित उदाहरण (रों) प्रदान करता है, http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm (दो कॉलम लेआउट की तरह आप के बाद मुझे लगता है कि कर रहे हैं के लिए)

http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm (तीन कॉलम लेआउट के लिए)।

इस लड़के साइट के इतने सारे लिंक के लिए खेद है, लेकिन मुझे लगता है कि यह एक अद्भुत संसाधन है।

Answer 4

यहाँ एक समाधान है (और यह कुछ quirks है, लेकिन मुझे पता है अगर आप उन्हें नोटिस देना और वे एक चिंता का विषय रहे हैं कि):

<div> 
    <div style="width:200px;float:left;display:inline-block;"> 
     Hello world 
    </div> 
    <div style="margin-left:200px;"> 
     Hello world 
    </div> 
</div> 

Answer 5

सीएसएस:

#sidebar {float: right; width: 200px; background: #eee;} 
#content {overflow: hidden; background: #dad;} 

HTML:

<div id="sidebar">I'm 200px wide</div> 
<div id="content"> I take up the remaining space <br> and I don't wrap under the right column</div> 

उपर्युक्त काम करना चाहिए, तो आप उस कोड को रैपर में डाल सकते हैं यदि आप इसे चौड़ाई देना चाहते हैं और इसे भी केंद्र में रखते हैं, overflow:hidden चौड़ाई बिना स्तंभ पर, यह नियंत्रित करने के लिए हो रही है, खड़ी की कुंजी है के रूप में (सही छोड़ा जा सकता है या) भी पक्ष स्तंभों के आसपास लपेट नहीं

IE6 हो सकता है जरूरत zoom:1 #content div पर सेट अगर आपको इसकी सहायता की आवश्यकता है

Answer 6

मुझे लगता है कि यह एक साधारण जवाब है, यह माता-पिता की चौड़ाई के आधार पर 50% प्रत्येक बच्चे को विभाजित करेगा।

<div style="width: 100%"> 
     <div style="width: 50%; float: left; display: inline-block;"> 
      Hello world 
     </div> 
     <div style="width: 50%; display: inline-block;"> 
      Hello world 
     </div> 
    </div> 

Answer 7

#wrapper { 
 
    margin-right: 50%; 
 
} 
 
#content { 
 
    float: left; 
 
    width: 50%; 
 
    background-color: #CCF; 
 
} 
 
#sidebar { 
 
    float: right; 
 
    width: 200px; 
 
    margin-right: -200px; 
 
    background-color: #FFA; 
 
} 
 
#cleared { 
 
    clear: both; 
 
}

<div id="wrapper"> 
 
    <div id="content">Column 1 (fluid)</div> 
 
    <div id="sidebar">Column 2 (fixed)</div> 
 
    <div id="cleared"></div> 
 
</div>