जहाँ तक मुझे पता के रूप में आप स्तंभों को शैलियाँ लागू करने में सक्षम नहीं होगा के लिए Give Up and Use Tables। कॉलम 3 और 4 अन्य रंग बनाने के लिए पृष्ठभूमि के रूप में ढाल का उपयोग करने के लिए आप क्या कोशिश कर सकते हैं।
#columns {
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 50%, blue 50%);
/*... appropriate css for other browser engines*/
}
updated jsFiddle सभी ब्राउज़र समर्थन ढाल
के साथ अद्यतन - संपादित करें -
के बाद से इरादा वास्तव में था तीसरे और चौथे स्तंभ के लिए पाठ रंग और नहीं पृष्ठभूमि बदलने के लिए कुछ अतिरिक्त विचार।
अब के लिए एक कंटेनर के अंदर एकल कॉलम में शैलियों को लागू करना संभव नहीं लगता है। विशिष्ट कॉलम में टेक्स्ट रंग बदलने के लिए एक संभावित कामकाज प्रत्येक शब्द को span के अंदर रखना है। फिर शब्दों पर पुनरावृत्ति करने के लिए जावास्क्रिप्ट का उपयोग करें और यह निर्धारित करें कि नया कॉलम कहां से शुरू होता है। तीसरे कॉलम में पहले तत्व को असाइन करना एक नई कक्षा से इसे और विभिन्न भाई बहनों को एक अलग पाठ रंग के साथ शैली बनाना संभव हो जाएगा।
क्योंकि कंटेनर एक उत्तरदायी लेआउट का हिस्सा है और आकार में बदल सकता है, स्क्रिप्ट को कॉलम चौड़ाई बदलने के लिए आकार बदलने के लिए आकार बदलना होगा।
कोड उदाहरण के प्रयोजन कैसे इस तरह के एक समाधान लागू करने के लिए और (जैसे span रों हर बार styleCols फिर से बनाए जा रहे हैं चलाया जाता है, सांत्वना उत्पादन के बहुत सारे एक वास्तविक आवेदन में उपयोग के लिए सुधार किया जाना चाहिए की रूपरेखा तैयार करने के लिए है। ..)।
जावास्क्रिप्ट
function styleCols() {
// get #columns
var columns = document.getElementById('columns');
// split the text into words
var words = columns.innerText.split(' ');
// remove the text from #columns
columns.innerText = '';
// readd the text to #columns with one span per word
var spans = []
for (var i=0;i<words.length;i++) {
var span = document.createElement('span');
span.innerText = words[i] + ' ';
spans.push(span);
columns.appendChild(span);
}
// offset of the previous word
var prev = null;
// offset of the column
var colStart = null;
// number of the column
var colCount = 0;
// first element with a specific offset
var firsts = [];
// loop through the spans
for (var i=0;i<spans.length;i++) {
var first = false;
var oL = spans[i].offsetLeft;
console.info(spans[i].innerText, oL);
// test if this is the first span with this offset
if (firsts[oL] === undefined) {
console.info('-- first');
// add span to firsts
firsts[oL] = spans[i];
first = true;
}
// if the offset is smaller or equal to the previous offset this
// is a new line
// if the offset is also greater than the column offset we are in
// (the second row of) a new column
if ((prev === null || oL <= prev) && (colStart === null || oL > colStart)) {
console.info('-- col++', colCount + 1);
// update the column offset
colStart = oL;
// raise the column count
colCount++;
}
// if we have reached the third column
if (colCount == 3) {
// add our new class to the first span with the column offset
// (this is the first span in the current column
firsts[oL].classList.add('first-in-col3');
return;
}
// update prev to reflect the current offset
prev = oL;
}
}
styleCols();
addEventListener('resize', styleCols, false);
सीएसएस
.first-in-col3, .first-in-col3~span {
color: red;
}
jsFiddle
जहां तक मुझे पता है, – Luca
ऐसा करने का कोई तरीका नहीं है (* [अभी तक] (http://dev.w3.org/csswg/selectors4/#nth-column-pseudo) *) ऐसा करने के लिए एक लागू साधन है। –
@ डेविड मैंने ऐसा सोचा। यही कारण है कि मैं जेएस के साथ ऐसा करने का एक तरीका समझने की कोशिश कर रहा हूं। भले ही स्क्रिप्ट सीएसएस कॉलम के अलावा ब्लॉक बनाता है। – otinanai