मेरी ग्रिड के साथ गणित सहायता: nth-child (an + b)

मैं एक ग्रिड बनाने की कोशिश कर रहा हूं जो कॉलम की प्रीसेट संख्या पर निर्भर नहीं है। और अधिक विस्तार में समस्याओं का वर्णन - -मेरी ग्रिड के साथ गणित सहायता: nth-child (an + b)

पर jsfiddle पर

http://jsfiddle.net/jordenvanforeest/MDv32/

मेरे समस्या अब है कि यदि आप चाहते हैं

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <title>Grid in HTML5 and CSS3</title> 
<style> 

* {margin:0;padding:0;} 
.row {display:block;position:relative;clear:both;} 
.row>* {display:block;position:relative;clear:both;float:left;clear:none;width:100%;} 
.row>*:empty {width:0px;} 

/* one column in the row */ 
.row>:nth-last-child(1):nth-child(1) {width:100%;} 

/* two columns in the row */ 
.row>:nth-last-child(2):nth-child(1) {width:50%;} 
.row>:nth-last-child(1):nth-child(2) {width:50%;} 

/* three columns in the row */ 
.row>:nth-last-child(3):nth-child(1) {width:33.33%;} 
.row>:nth-last-child(2):nth-child(2) {width:33.33%;} 
.row>:nth-last-child(1):nth-child(3) {width:33.34%;} 
.row>:empty:nth-last-child(3):nth-child(1)+:not(:empty) {width:66.66%;} 
.row>:empty:nth-last-child(2):nth-child(2)+:not(:empty) {width:66.67%;} 

article {margin:.5em;border:1px solid green;border-radius:.3em;padding:.5em; } 
</style> 

</head> 
<body> 

<section class="row"> 
<div> 
<article> 
<p>This row has only one child.</p> 
</article> 
</div> 
</section> 

<section class="row"> 
<div> 
<article> 
<p>This row has two children</p> 
</article> 
</div> 
<div> 
<article> 
<p>This is the second child</p> 
</article> 
</div> 
</section> 

<section class="row"> 
<div> 
<article> 
<p> 
This row has three children 
</p> 
</article> 
</div> 
<div> 
<article> 
<p>So this is col 2 of 3</p> 
</article> 
</div> 
<div> 
<article> 
<p>And this is col 3 of 3.</p> 
</article> 
</div> 
</section> 

<section class="row"> 
<div></div> 
<div> 
<article> 
<p>The first child of this row is empty so spanned with the second</p> 
</article> 
</div> 
<div> 
<article> 
<p>This is the second column</p> 
</article> 
</div> 
</section> 

<section class="row"> 
<div> 
<article> 
<p>This is the first column</p> 
</article> 
</div> 
<div></div> 
<div> 
<article> 
<p>The second and third column are spanned</p> 
</article> 
</div> 
</section> 

</body> 
</html>

मैं एक बड़ा नमूना डाल: मैं स्थिति को दिखाने के लिए एक छोटा सा नमूना बनाया यह ग्रिड 3 से अधिक कॉलम के लिए समायोजित करने के लिए, सीएसएस आकार बड़ा तेजी से हो जाता है। तो मैं एक और समाधान की तलाश में हूं। मैं की तरह

.row>:nth-last-child(an+b):nth-child(cn+d) {}

लेकिन मेरे पथरी कौशल थोड़ा जंग लगी हैं कुछ करने की कोशिश है और मैं इसे ठीक से काम करने के लिए नहीं मिल सकता है। सहायता की बहुत सराहना की जाएगी।

अद्यतन

thirtydot एक जवाब है कि सीएसएस बहुत छोटे बनाया प्रदान की है। यह fiddle उनके द्वारा सुझाए गए उन्नत संस्करण है।

कोई अन्य सुझाव अभी भी स्वागत है। मेरे 12 कॉलम ग्रिड को अभी भी स्पैनिंग के लिए 30K की आवश्यकता है।

स्रोत

2012-07-05 Jorden van Foreest

+1: इस तरह के एक शांत प्रयोग! –

हां, लेकिन क्या आप मदद कर सकते हैं? –

यह एक दिलचस्प विचार है। केवल नकारात्मक पक्ष में मौजूदा कार्यान्वयन के लिए खाली divs की आवश्यकता है, आप इसे उत्पादन में कैसे इस्तेमाल करेंगे? – Mindthetic

आप display: table संयुक्त with table-layout: fixed के साथ कुछ ऐसा कर सकते हैं।

ब्राउज़र समर्थन: http://caniuse.com/css-table (लेकिन सीमित कारक यहाँ :not() and :empty है)

देखें:http://jsfiddle.net/thirtydot/MDv32/3/

आप देख सकते हैं, यह लगभग समान लग रहा है। कुछ चालाकी के साथ, आप मेरे डेमो में अधिकांश तकनीक को मेरे द्वारा उपयोग की जाने वाली तकनीक के साथ दोहराने में सक्षम होना चाहिए। मैंने अपने डेमो में एचटीएमएल पर टिप्पणी की जहां मैंने रोका।

सीएसएस:

.row { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 
.row > * { 
    display: table-cell; 
} 
.row > :empty { 
    display: none; 
} 
/* for example: */ 
.row > :empty + :not(:empty) + :last-child:not(:empty) { 
    width: 33.33%; 
}

स्रोत

2012-07-05 11:37:02 thirtydot

शानदार! ऐसा लगता है कि मैं वही चाहता हूं। क्यों कह रहे हैं कि यह केवल 9 0% है? क्या मुझे कुछ याद आ रही है? –

जब आपके पास घोंसला वाली पंक्तियां हों तो यह समान रूप से व्यवहार नहीं कर सकता है। हालांकि यह शायद काफी करीब है, इसलिए मैंने उस वाक्य को बदल दिया है। – thirtydot

कोई भी सही नहीं है। घोंसला काम करता है। –

मेरी ग्रिड के साथ गणित सहायता: nth-child (an + b)

उत्तर

संबंधित मुद्दे