CSS3列を使用してWindows 8の横スクロールと複数列のレイアウトを模倣しようとしていますが、列の幅を固定するか、フィドルで行っているように、ビューポートの幅が必要です。
現在、使用しているユニットの種類に関係なく、設定した幅に関係なく、列がコンテナー div に自動的に収まるように見えます。
私のフィドルでは、列を に設定すると35vw、同じ幅の 2 つの列が得られます。私の知る限り、2 つの列が完全に表示され、3 番目の列の一部が表示されるはずですが、そうはなっていません。この動作はpx、emまたは%ユニットとして設定した場合にも発生します。
これはブラウザのデフォルトの動作ですか、それとも何か不足していますか?
何が起こっているのかをいじってなんとか見つけたので、発見と解決策を共有します。
CSS で列を設定するには 2 つの方法がありますcolumn-count。列の幅に関係なく、コンテナーの幅に収まる列の数を設定する方法。最適な列幅をcolumn-width設定して、コンテナー幅内にできるだけ多くの列を収めます。
これは、ブラウザを設定すると、幅が約300pxcolumn-width: 300pxのコンテナ内にできるだけ多くの列を収めようとすることを意味します。コンテンツの量とビューポートの幅に応じて、列の幅が変わります。
私の最初のフィドルではcolumn-width: 35vw、コンテナがwidth: 100%（継承された）間に設定しようとしていました。コンテナーの幅をいじってみると、コンテナーの幅が明示的に設定されていないために、上記の動作が発生していることがわかりました。そのことを念頭に置いて、javascript やその他の CSS プロパティを使用してコンテナーの幅を設定できればと思っていましたが、役に立たなかったのです。
いじって、コンテナを に設定するposition: absoluteと、期待どおりの動作が起こりました。それから私は試してみfloat: leftましたが、それもうまくいきました。
現在、私がテストした限りでは、これは Webkit (最新の Opera dev、最新の Chrome 安定版) では機能しません。必要に応じて、IE11 および Firefox の最新の表示。たぶんバグか何かです。これは私の最新の fiddleで確認できます。
新しいものなので、しばらく実験する必要がありました。列がそのようにオーバーフローしている場合、部分的に隠されている列の残りの部分をオーバーフローに押し込むために拡張すると思います。少なくとも、プレフィックスのないバージョンをまだ認識していない Chrome では。30vw に設定すると、3 つの列が表示されます。スクロールバーが原因で 33 が機能しないと思われます。
また、そのフィドルには少しバグ/グリッチがあります。時々凍りついた。