आधुनिक वेब डिज़ाइन में मुश्किल चीजों में से एक दो (या अधिक) कॉलम लेआउट बनाना है जहां सभी कॉलम बराबर ऊंचाई के हैं। मैंने शुद्ध सीएसएस में ऐसा करने का तरीका ढूंढने के लिए एक खोज पर सेट किया।
आप अपने दोनों कॉलम (या पृष्ठ की पृष्ठभूमि) वाले एक रैप-div में पृष्ठभूमि छवि का उपयोग करके इसे आसानी से पूरा कर सकते हैं।
आप सीएसएस तालिका कक्षों का उपयोग करके भी ऐसा कर सकते हैं, लेकिन दुर्भाग्यवश इसके लिए ब्राउज़र समर्थन अभी भी छायादार है, इसलिए यह एक पसंदीदा समाधान नहीं है। पढ़ें, एक बेहतर तरीका है।
मुझे वेब पर दो पृष्ठों से मेरी प्रेरणा मिली, हालांकि मैं अपना समाधान पसंद करता हूं, क्योंकि यह मुझे गोलाकार कोनों और सटीक चौड़ाई या प्रतिशत लेआउट का उपयोग करने की अधिक स्वतंत्रता देता है, और इसे संपादित करना आसान है, आपका अंतिम लेआउट होल्डिंग div आपको नकारात्मक संख्या क्रंचिंग करने के लिए मजबूर नहीं कर रहा है।
== चाल: ==
सबसे पहले आप पृष्ठभूमि डिजाइन कॉलम बनाने के लिए, तो आप एक पूरी चौड़ाई div कि अपने नियमित रूप से सामग्री धारण कर सकते हैं डाल दिया। यह चाल कॉलम के भीतर फ़्लोट किए गए कॉलम के बारे में है, जब सामग्री लंबाई में फैली हुई है तो सभी पैरेंट कॉलम पर पुश प्रभाव पैदा करना, इससे कोई फर्क नहीं पड़ता कि अंत कॉलम सबसे लंबा है।
इस उदाहरण में मैं गोलाकार कोनों के साथ एक केंद्रित रैप-डिव में 2 कॉलम ग्रिड का उपयोग करूंगा। मैंने आसान कॉपी-पेस्ट के लिए फ्लफ को बाहर रखने की कोशिश की है।
== चरण 1 ==
अपने बुनियादी वेब पेज बनाएँ।
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
== चरण 2 ==
एक बनाएं div जारी अंदर एक और div जारी। फिर अंदरूनी div पर नकारात्मक फ्रेम को अपने फ्रेम से बाहर पॉप करने के लिए लागू करें। मैंने चित्रण उद्देश्यों के लिए बिंदीदार सीमाएं जोड़ दीं। पता है कि अगर आप बाईं ओर बाहरी div को तैरते हैं और अंदरूनी div को बाईं ओर नकारात्मक मार्जिन देते हैं, तो आंतरिक div आपको स्क्रॉल बार दिए बिना पेज एज के नीचे जाएगा।
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
border: 3px dotted gold; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
this content obviously only fits the left column for now.
</div>
</div>
</body>
</html>
== चरण 3 ==
अंदर div में: के सभी स्तंभों संयुक्त के साथ है कि पृष्ठभूमि के बिना एक div बनाएँ। यह अंदरूनी div के किनारे पर धक्का देगा। मैंने चित्रण उद्देश्यों के लिए एक बिंदीदार सीमा जोड़ा। यह आपकी सामग्री के लिए कैनवास होगा।
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
border: 3px dotted gold; /*temporary css*/
}
#overbothsides{
float:left;
width:400px;
border: 3px dotted black; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
this content spans over both columns now.
</div>
</div>
</div>
</body>
</html>
== चरण 4 ==
अपनी सामग्री जोड़ें। इस उदाहरण में मैं दो divs रखता हूं जो लेआउट पर स्थित हैं। मैंने बिंदीदार सीमाओं को भी हटा दिया। प्रेस्टो, यही वह है। यदि आप चाहें तो आप इस कोड का उपयोग कर सकते हैं।
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
}
#overbothsides{
float:left;
width:400px;
}
#leftcol{
float:left;
width:80px;
padding: 10px;
}
#rightcol{
float:left;
width:280px;
padding: 10px;
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
<div id="leftcol">left column content</div>
<div id="rightcol">right column content</div>
</div>
</div>
</div>
</body>
</html>
== चरण 5 ==
यह अच्छे आप एक रैप div में पूरे डिजाइन केंद्रित कर सकते हैं और यह कोने गोल देने के लिए। गोलाकार कोनों पुराने आईई में नहीं दिखाएंगे जबतक कि आप इसके लिए एक विशेष फिक्स का उपयोग नहीं करते।
<!DOCTYPE HTML>
<html>
<head>
<style>
#wrap{
position:relative;
width:500px;
margin:20px auto;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
}
#rightsideBG{
float:right;
background:silver;
width:300px;
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
}
#overbothsides{
float:left;
width:400px;
}
#leftcol{
float:left;
width:80px;
padding: 10px;
}
#rightcol{
float:left;
width:280px;
padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
<div id="leftcol">left column content</div>
<div id="rightcol">right column content</div>
</div>
</div>
</div>
</div>
</body>
</html>
== प्रेरणा स्रोतों ==
क्वांटिन, यह एक डुप्लिकेट नहीं है। मेरा कोड इंस्पेरड किया गया था (दूसरों के बीच) http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks लेकिन यह और अधिक सरल और बदला गया है, हालांकि मुझे बिल्कुल याद नहीं है अंतर यह है कि, बहुत समय पहले मैंने इसे लिखा था। – Paul
इस तरह के मुद्दे के लिए इस साइट का उपयोग करें: http://callmenick.com/post/css-equal-height-columns-three- अलग-ways –