3 कॉलम द्रव फिक्स्ड तरल लेआउट कैसे बनाएं?

Question

मैं एक 3 कॉलम सीएसएस लेआउट के लिए देख रहा हूँ, बीच में 1 निश्चित अनुभाग और यह लगभग 2 द्रव साइडबार के साथ:

http://www.uploadup.com/di-UEFI.png

बीच 250px चौड़ाई (उदाहरण के लिए) और साइडबार (कम से कम राशि है) 150 पीएक्स चौड़ाई। यदि ब्राउज़र चौड़ाई 550px (250 + 300) से अधिक लंबी थी, तो साइडबार की लंबी चौड़ाई होनी चाहिए। (और मध्य हमेशा 250px है)

सीएसएस क्या कर सकता है? सभी ब्राउज़रों में संगतता के साथ।

टिप्पणी: मैं this page देखा था, लेकिन मैं नहीं जानता कि कैसे मेरी इच्छा

Answer 1

आप इसके लिए inline-block रों इस्तेमाल करने की कोशिश कर सकते हैं। उनका उपयोग शायद ही कभी किया जाता है, लेकिन कभी-कभी वे लेआउट के लिए बहुत अच्छे होते हैं।

तो, इसे देखें: http://jsfiddle.net/kizu/UUzE9/ - inline-block के साथ आप किसी भी निश्चित और तरल कॉलम के साथ लेआउट बना सकते हैं। एल्गोरिदम:

1. सबसे पहले, आप रैपर को सभी निश्चित कॉलम के योग के बराबर पैडिंग जोड़ते हैं। आपके मामले में - 250px।
2. फिर, आप सभी तरल कॉलम की न्यूनतम चौड़ाई के बराबर रैपर में min-width जोड़ते हैं।
3. फिर, आप white-space: nowrap रैपर में जोड़ते हैं, इसलिए कॉलम कूद नहीं पाएंगे।
4. और फिर बस आपको आवश्यक सभी कॉलम जोड़ें।

आप IE7 और के लिए समर्थन की जरूरत है कम, वहाँ कुछ ऐसी बातों का आम inline-block ठीक के अलावा पता करने के लिए कर रहे हैं:

1. आप एक स्तंभ के भीतरी बच्चे को white-space: normal लौटना चाहिए, या स्तंभों जीता एक लाइन पर नहीं रहना।
2. आईई में एक प्रेत स्क्रॉल दिखाई दे सकता है, शायद इसे हटाने का एक बेहतर तरीका है, लेकिन मैं कुछ रैपर पर overflow: hidden का उपयोग करता हूं।

का आनंद लें :)

Answer 2

के लिए इसे बदलने के लिए आप वहाँ तैयार टेम्पलेट्स में से एक का उपयोग नहीं करते हैं, तो
आप तीन से शुरू कर सकते हैं div छोड़ दिया मंगाई चौड़ाई के साथ बीच: 250px और min-width: 150px
साथ बाहर वाले आप <section> टैग से बदलने के लिए चाहते हो सकता है, बस इसे एक display: block

Answer 3

थी बनाने के

देना जावास्क्रिप्ट के बिना आईई 6/7 में काम करता है, ऐसा करने का सबसे आसान तरीका table के साथ है।

मुझे पता है, मुझे पता है। यह नहीं है कि इस मामले में बुरा, सभी मानते हैं।

देखें:http://jsfiddle.net/thirtydot/Q2Qxz/

IE6/7 + क्रोम में परीक्षण किया गया, और यह सिर्फ अन्य सभी आधुनिक ब्राउज़रों में काम करेंगे।

HTML:

<table id="container" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td id="left">fluid</td> 
     <td id="mid">fixed</td> 
     <td id="right">fluid</td> 
    </tr> 
</table> 

सीएसएस:

html, body { 
    margin: 0; 
    padding: 0; 
    border: 0 
} 
#container { 
    border: 0; 
    table-layout: fixed; 
    width: 100% 
} 
#container td { 
    vertical-align: top 
} 
#mid { 
    width: 250px; 
    background: #ccc 
} 
#left { 
    background: #f0f 
} 
#right { 
    background: #f0f 
}