0

HTML で次のレイアウトが必要です (S - 空のスペース、子- html の子、DIV または TABLE にすることができます。レイアウトは、JavaScript を使用せずにサイズ変更できる必要があります (CSS + HTML はツールです)。無制限の数の子をサポートする必要があります。すべての子は同じ幅になります。

S*Child*S*Child*S*Child*S

これに table を使用すると、S*Child*SS*Child*SS*Child*S という結果になることに注意してください。これは、私が探しているものではありません。

4

1 に答える 1

0

子要素が可能な範囲で並べて表示され、新しい行などに折り返され、使用可能な幅に自動的に適応するグリッドを意味していると思います。偶然の場合を除いて、長方形のグリッドにはなりません。ほとんどの場合、最後の行は他の行よりも要素が少なくなっています。

簡単なアプローチは、フローティングを使用することです。次のような単純なマークアップを想定

<div class=grid>
<div>Child</div>
<div>Child</div>
...
</div>

次のようなスタイルシートを使用できます

.grid div { 
width: 4em;
float: left;
margin-left: 0.2em;
background: #ccc; 
}

これは、最後の Child の右側にスペースを設定しません。何らかの理由でそのような間隔が必要な場合は、追加できます

.grid div:last-child { margin-right: 0.2em; }
于 2012-07-10T08:52:01.110 に答える