グリッドとの援助：nth-child（an + b）

予め設定された数の列に依存しないグリッドを作成しようとしています。私は状況を表示するために、少量のサンプルを作成しました：グリッドとの援助：nth-child（an + b）

<!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>

私はより大きなサンプル置く - 私の問題は、今あなたがしたい場合ということです

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

でjsfiddleに - より詳細に問題を説明しますこのグリッドは3つ以上の列に対応するため、CSSサイズは指数関数的に大きくなります。だから私は他の解決策を探しています。

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

私の計算能力は少し錆びており、正しく動作するようにはできません。ヘルプが大歓迎です。

thirtydot

更新は、CSSがはるかに小さく答えを提供します。このfiddleは、彼が提案した改良版です。

他の提案は、まだ歓迎されています。私の12門のグリッドグリッドは、スパニングのためにまだ30Kが必要です。

出典

2012-07-05 Jorden van Foreest

1：このようなクールな実験！ –

はい、お手伝いできますか？ –

これは興味深い考えです。現在の実装では空のdivが必要なだけの欠点がありますが、これが本番環境でどのように使用されていると思いますか？ – Mindthetic

display: tableと同様のものをwith table-layout: fixedと組み合わせることができます。

ブラウザのサポート：http://caniuse.com/css-table（しかし、ここでは制限要因が:not() and :emptyある）

を参照してください：http://jsfiddle.net/thirtydot/MDv32/3/

あなたが見ることができるように、それは事実上同一に見えます。いくつかの工夫をして、デモのほとんどの機能を私の技術で再現できるはずです。私は私のデモでHTMLをコメントアウトしました。

CSS：

.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

ブリリアント！まさに私が欲しいものです。なぜそれが90％しかないと言っているのですか？私は見逃していますか？ –

ネストされた行がある場合、これは同じように動作しないことがあります。それはおそらく十分に近いので、私はその文章を変更しました。 – thirtydot

すべてが正しいわけではありません。ネスティングが機能します。 –

グリッドとの援助：nth-​​child（an + b）

答えて

関連する問題

グリッドとの援助：nth-child（an + b）