सीएसएस तरल 'कॉलम'

Question

सीएसएस में यह लेआउट पाने का सबसे अच्छा तरीका क्या है? कल्पना करें कि मेरे पास तीन divs हैं, दो divs एक दूसरे के अंदर .. दो आंतरिक divs के, पहले एक विशिष्ट चौड़ाई सेट है, और दूसरा div शेष जगह लेने की उम्मीद है।

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

यदि मैं फिक्स्ड फ्लोट करता हूं लेकिन द्रव नहीं, तरल कॉलम निश्चित div (जो नहीं चाहता था) के नीचे लपेट जाएगा।

+-------+ +--------------------------------------+ 
| fixed | |          | 
+-------+ |    fluid     | 
      |          |   
      |          | 
      +--------------------------------------+ 

<div> 
    <div>fixed</div> 
    <div>fluid</div> 
</div> 

यह एक पूरी तरह से सीएसएस समाधान, कोई जावास्क्रिप्ट frameworks- होने के लिए कम से कम 'hackage' (यदि सभी) के साथ सबसे अधिक इस्तेमाल किया ब्राउज़र पर कार्य करता है और आदर्श।

आशा है कि ASCII कला काम करता है,

धन्यवाद।

Answer 1

मार्कअप

<div id="fixed">fixed content</div> 
<div id="fluid">fluid content</div> 

सीएसएस

#fixed { 
    float: left; 
    width: 13em; 
    margin-right: -14em; 
} 
#fluid { 
    margin-left: 14em; 
} 

कि चाल करना चाहिए। मैं इसे अपनी व्यक्तिगत साइट पर उपयोग करता हूं। मार्जिन इसे सभी एक ही स्तर पर बनाते हैं।

Answer 2

उम्मीद है कि इस मदद करता है कम से कम आप आरंभ:

* { 
    margin:0; 
} 

div#wrapper { 
    margin:0; 
    height:auto !important; //IE Hack 
    height:100%; //IE Hack 
    min-height:100%; 
    overflow:auto 
} 

div#fixed{ 
    float:left; 
    position:absolute; 
    background-color:red; 
    margin:0; 
    height:200px; 
    width:200px 
} 

div#fluid{ 
    float:right; 
    position:absolute; 
    left:200px; 
    background-color:blue; 
    display:block; 
    height:80%; 
    width:60% 
} 

"आवरण" अपने रैपिंग div होगा। मैंने केवल तरल कॉलम को 60% की चौड़ाई में सेट किया है ताकि आप देख सकें कि इसे तरलता से कार्य करना चाहिए। मैंने ओपेरा 10, आईई 6, और फ़ायरफ़ॉक्स 3 में केवल मामूली समस्याओं के साथ इसका परीक्षण किया। यदि आप द्रव कॉलम की चौड़ाई 100% पर सेट करते हैं तो आईई दाहिने ओर एक अतिरिक्त 200px जोड़ना चाहता है। मुझे यकीन है कि इस जगह के लिए एक काम है।

Answer 3

आप Emastic CSS Framework का उपयोग कर सकते हैं जो द्रव कॉलम का समर्थन करते हैं। यहां Link आपके "ASCII कला कार्य" के समान उदाहरण है :)

Answer 4

वास्तव में यह एक आसान समाधान है जिसे मैंने बहुत पहले नहीं खोजा था। आईई 7 पर अच्छी तरह से काम करता है। #fluid div निश्चित फिक्स के बगल में स्लाइड करेगा और सभी उत्तरदायी साइटों के लिए बड़ी तरलता बनाए रखने के दौरान शेष स्थान ले जाएगा।

#fixed{ 
    width:200px; 
    float:left; 
} 
#fluid{ 
    overflow:hidden; 
}