5

CSSで次のことが可能かどうか疑問に思っています：

  • 任意の数の列の DIV のグリッド、たとえば N (5 から 20、またはそれ以上) とします。
  • グリッドは流動的である必要があります。つまり、DIV がブラウザーの幅の 100% を占めるように、ブラウザーの幅が変化すると、すべての DIV が収縮および拡張します。
  • 特定のブラウザー幅の下で、グリッドは N-1 列レイアウトに切り替わります。つまり、1 列が失われ、DIV はブラウザーの幅に合わせて再び拡張されます。
  • レイアウトが単一列ベースになるまでプロセスを繰り返す必要があります。ここでも DIV の幅は流動的です。

言葉にするのは難しいことではありませんが、このページの画像と同様に動作する必要がありますが、1 列までずっと下に移動する必要があり、3 列から 6 列のレイアウトに即座にジャンプすることはありません。

私はJavascriptでそれを行うことができることを知っています.上のリンクで行われているように、@mediaクエリを使用して(列幅を手動でいじる必要があります)、CSSでのみこれを行う方法があるのではないかと思っています.ブラウザに仕事をさせますか？

ありがとう。

4

1 に答える 1

1

Twitter Bootstrap Grid システムの使用を検討しましたか? または、少なくとも同様のシステムを見直して採用しますか? http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystemと「レスポンシブ」グリッド css (または彼らがそれを呼び出すもの)。

これは、実際のグリッド システムの例です。http://jsfiddle.net/rlemon/yS78x/1/

上記のように、メディアクエリを利用しています...しかし、それはすでにあなたのために行われており、IMOは採用しやすいグリッドシステムの1つです。

于 2012-04-11T19:22:15.557 に答える