द्रव केंद्र

Question

के साथ 3-कॉलम लेआउट प्राप्त करने का सही तरीका क्या है, मैं दो निश्चित-चौड़ाई वाले साइडबार (बाएं और दाएं) और तरल केंद्र के साथ 3-कॉलम लेआउट पर काम कर रहा हूं। मैंने ए लिस्ट के अलावा Holy Grail article का पालन किया है, और, हालांकि यह अधिकांश ब्राउज़रों में ठीक काम करता है, मुझे इंटरनेट एक्सप्लोरर 7+ में कुछ समस्याएं आ रही हैं।

आईई 7+ के साथ समस्या वास्तव में इस तकनीक से नहीं टिकती है, बल्कि इस तथ्य से कि पृष्ठ क्विर्क मोड में प्रतिपादन कर रहा है। यदि मैं मानकों-अनुपालन मोड में प्रस्तुत करता हूं, हालांकि, कई पुराने तत्व विस्थापित हो जाते हैं और उन्हें पूर्ण पुनः लिखने की आवश्यकता होती है।

यह देखते हुए कि यह लेख कुछ वर्षों से है, क्या यह इस विषय पर सबसे अद्यतित संदर्भ है? या मुझे एक अलग तकनीक लागू करनी चाहिए?

ऐसा करने का सबसे अच्छा तरीका किसी भी अंतर्दृष्टि की सराहना की जाएगी।

Answer 1

कॉलम फ़्लोट करने में वास्तव में कोई बात नहीं है।

HTML:

<div id="wrapper"> 
    <div id="left"></div> 
    <div id="center"> Center content</div> 
    <div id="right"></div> 
</div> 

सीएसएस:

#left { 
    position:absolute; 
    left:0; 
    width:50px; 
    height:100%; 
    background-color:pink; 
} 

#center { 
    height:100%; 
    margin: 0 50px; 
    background-color:green; 
} 

#right { 
    position:absolute; 
    right:0; 
    top:0; 
    width:50px; 
    height:100%; 
    background-color:red; 
} 

body, html, #wrapper { 
    width:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
} 

डेमो: http://jsfiddle.net/AlienWebguy/ykAPM/

Answer 2

पूर्ण स्थिति पूरी चौड़ाई पृष्ठ के लिए काम करता है लेकिन क्या बारे में जब आप एक निश्चित चौड़ाई है कि केंद्र में आ जाए है । IE8 + में काम करने वाले फ्लेक्स-बॉक्स के आधार पर समाधान के साथ आया था। flexie polyfill पुराने ब्राउज़र

के लिए प्रयोग किया जाता है http://jsfiddle.net/lorantd/9GFwT/10/

<div id="header"></div> 
<div id="main">  
    <div id="menu"></div> 
    <div id="content"></div> 
    <div id="summary"></div> 
</div> 
<div id="footer"></div> 

#header { 
    background-color: #9B9EA7; 
    height: 70px; 
} 

body { 
    min-width: 500px; 
    max-width: 630px; 
    margin-right: auto; 
    margin-left: auto; 
    display: block; 
} 

#main { 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    display: flex;    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
    display:-webkit-box; /* Safari and Chrome */ 
    display:box; 
    width: 100%; 
} 

#menu { 
    background-color: #D42108; 
    width: 120px; 
    margin-top: 10px; 
    margin-right: 10px; 
} 

#content { 
    background-color: #FFD700; 
    height: 500px; 
    margin-top: 10px; 
    margin-right: 10px; 
    -webkit-box-flex: 2;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    -moz-box-flex: 2;   /* OLD - Firefox 19- */ 
    width: 60%;    /* For old syntax, otherwise collapses. */ 
    -webkit-flex: 2;   /* Chrome */ 
    -ms-flex: 2;    /* IE 10 */ 
    flex: 2; 
} 

#summary { 
    width: 30px; 
    margin-top: 10px; 
    background-color: #9B9EA7; 
} 

#footer { 
    background-color: #353535; 
    width: 100%; 
    height: 50px; 
    margin-top: 10px; 
    clear: both; 
} 

Answer 3

देखें मेरा मानना ​​है कि यह ज्यादातर मामलों में उपयोगी होना चाहिए।

कृपया नीचे दिए गए लिंक को देखें।

http://jsfiddle.net/ykAPM/278/

#left { 
position:fixed; 
left:0; 
width:50px; 
height:100%; 
background-color:pink; 
} 

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

#right { 
position:fixed; 
right:0; 
top:0; 
width:50px; 
height:100%; 
background-color:red; 
} 

body, html, #wrapper { 
width:100%; 
height:100%; 
padding:0; 
margin:0; 
} 

#test{ 
height:1000px; 
}