0

私はZurbFoundationをいじって、次のプロジェクトへの適合性を評価してきました。ブラウザの幅を変更するときに気に入らない特性に出くわしたので、それを行う方法があるかどうかを確認したいと思います。

行ごとに4つの画像(「列」)を持つグリッドがあるとします。ブラウザウィンドウの幅を縮小すると、画像の量が最初の3つ、次に2つ、最後に1行あたり1つの画像に縮小され、幅が狭くなることが自然に予想されます。

しかし、代わりにFoundationが行っているように見えるのは、行ごとに4つの列を維持するために可能な限りdivを縮小し、スペースが不足して4つになると、行ごとに1つの画像に直接ジャンプします。

私にとってこの振る舞いは論理的ではないので、それを行う方法があるはずだと思いましたが、http://foundation.zurb.com/docs/grid.phpを調べても、それを行う方法を見つけることができませんでしたdivまたはブロックグリッドを使用します。

これはレスポンシブグリッドの101の機能だと思いますが、これらのcssフレームワークについてはあまり経験がありません。では、行あたりの列数を徐々に減らしていくために、代わりに独自のメディアクエリを書き始める必要がありますか?

ありがとう!

4

2 に答える 2

0

Foundation は、コンテンツがレスポンシブまたは流動的であることを強制しませんが、グリッド自体はそうです。12 列のグリッドがモバイル グリッドに折りたたまれる特定のポイントまで流動的です。(デフォルトのグリッド設定を想定)

ただし、すべての画像を列内で左にフローティングさせるだけで、探している動作を得ることができます。

お気に入り:

img {float:left; width:24%;}

次に、必要に応じて最小幅と最大幅を追加してみてください。

img {float:left; width:24%; min-width:100px; max-width:300px;}
于 2013-01-04T14:50:40.323 に答える