12

事前設定された列数に依存しないグリッドを作成しようとしています。状況を示すために小さなサンプルを作成しました。

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

問題をより詳細に説明する、より大きなサンプルを jsfiddle に置きました。

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

私の問題は、このグリッドを 3 列以上に対応させたい場合、CSS サイズが指数関数的に大きくなることです。だから私は他の解決策を探しています。私は次のようなことをしようとしました

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

しかし、私の微積分スキルは少し錆びており、適切に機能させることができません。助けていただければ幸いです。

アップデート

thirddotは、CSS を大幅に小さくする答えを提供しました。このフィドルは、彼が提案した改良版です。

他の提案は引き続き歓迎します。私の 12 列のグリッドは、スパンにまだ 30K 必要です。

4

1 に答える 1

5

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

ブラウザのサポート: http://caniuse.com/css-table (ただし、ここでの制限要因は:not()と: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-05T11:37:02.570 に答える