2

column-width を 200px に設定した CSS3 Multicolumns を使用しており、さまざまな画面サイズに適応できるように column-count を自由に使用できます。

これが私が取り組んでいるコードです: http://jsfiddle.net/kBPUX/

私の 1280px 幅のラップトップでは、ウィンドウが 1 列から 2 列、最大 4 列まで拡大すると、列が中央に配置されます。それはうまく機能しますが、ウィンドウが最大化されると突然4列になり、すべての列が突然左揃えになり、右側に大きな醜いガターが残ります。

それが何であるか、また、任意の解像度で列を中央に配置する方法について何か考えはありますか?

EDIT:もう少し遊んだ後、ブラウザがこれ以上列を作成したくないということが起こっていると思います。column-fill は指定されていないため、デフォルトで auto になり、列の高さをできるだけ一致させようとします。さらに列を追加すると、列の高さが異なります。この時点で、列が親コンテナーの中央に配置され、左揃えにならないようにする必要があります。

注: これは、私がサポートしているすべての Firefox、Chrome、および IE9 で動作します。JQuery レイアウト製品には絶対に触れません。純粋な CSS でなければなりません。

4

2 に答える 2

0

今日の時点で、私の問題に対する実用的な解決策はわかりませんが、適切な解決策は複数列仕様の列スペース分散プロパティであると信じていますが、まだどのブラウザーにも実装されていません。

于 2012-07-17T01:42:24.197 に答える