जहां तक मुझे पता है, सीएसएस में कोई कोल्प्सन नहीं है, लेकिन column-span
निकट भविष्य में मल्टी कॉलम लेआउट के लिए होगा, लेकिन चूंकि यह CSS3 में केवल एक मसौदा है, आप इसे यहां देख सकते हैं । वैसे भी आप टेबल-जैसे डिस्प्ले के साथ div
और span
इस तरह से वर्कअराउंड कर सकते हैं ।
यह HTML होगा:
<div class="table">
<div class="row">
<span class="cell red first"></span>
<span class="cell blue fill"></span>
<span class="cell green last"></span>
</div>
</div>
<div class="table">
<div class="row">
<span class="cell black"></span>
</div>
</div>
और यह सीएसएस होगा:
/* this is to reproduce table-like structure
for the sake of table-less layout. */
.table { display:table; table-layout:fixed; width:100px; }
.row { display:table-row; height:10px; }
.cell { display:table-cell; }
/* this is where the colspan tricks works. */
span { width:100%; }
/* below is for visual recognition test purposes only. */
.red { background:red; }
.blue { background:blue; }
.green { background:green; }
.black { background:black; }
/* this is the benefit of using table display, it is able
to set the width of it's child object to fill the rest of
the parent width as in table */
.first { width: 20px; }
.last { width: 30px; }
.fill { width: 100%; }
इस ट्रिक का उपयोग करने का एकमात्र कारण table-layout
व्यवहार का लाभ प्राप्त करना है, मैं इसे बहुत उपयोग करता हूं यदि केवल कुछ प्रतिशत तक div और अवधि चौड़ाई सेट करना हमारी डिजाइन आवश्यकता को पूरा नहीं करता है।
लेकिन अगर आपको table-layout
व्यवहार से लाभ उठाने की आवश्यकता नहीं है, तो डरिल्लई का जवाब आपको काफी पसंद आएगा।