問題タブ [css-multicolumn-layout]

CSSを使用して 1 つのリストから複数の列を作成するにはどうすればよいですか? 列の数は、次のように、メディア クエリを使用した画面の幅に応じて変更する必要があります。

ラグスクリーン:

中画面：

小画面:

ここに私のHTMLコードがあります:

イベントでいっぱいのページの印刷用バージョンの作成に取り組んでいます。用紙を節約するために、ページで複数列の CSS を使用することにしました。驚いたことに、Chrome には上書き機能があり、印刷時に複数列を使用できません。これには理由がありますか、それともバグですか？

コンテナには長すぎる html リストがあり、それを分割して余分な項目を別の列に表示したいと考えています。しかし、CSS で列を使用すると、リストが均等に分割されます。私が12個のアイテムを持っている場合、各列に6〜6個のように。しかし、私はこれをしたくありません。代わりに、他の列の余分なアイテムのみを表示したい.

次の図では、9 から 12 までの項目を別の列に表示したいと考えています。

助けてください。

CSS

HTML

この画像を参照してください

画像でわかるように、9 ～ 12 個のリスト アイテムはすぐに使用できます。箱の中に持ち込めません。

https://jsfiddle.net/6g6176zs/1/は単純な 2 列の CSS レイアウトで、画像が非常に広いため複数の列にまたがっていますが、残念ながらテキストが画像の上に重なっています。

column-span:all画像を含むpのみを配置できることは知ってい<p>ますが、ワイド画像（またはテーブルまたは何を持っているか）が含まれているかどうかを知らずに、テキストが画像の周りを流れるようにする方法はありますか（フロートのように）？

理想的には、テキストは、可能な限り column-width まで列を埋めるように流れます:

CSS:

html:

順序付けられていないリストの列レイアウトを実装するためのクロスブラウザー メソッドを見つけようとしています。マークアップは CMS から出力されるため、クラスを追加する以外に出力を変更することはできません。列を機能させることができますが、列が常に等しいとは限らないため、列の区切りも指定する必要があります。マークアップは次のようになります。

CSS (Chrome や IE/Edge でも問題なく動作しますが、Firefox では失敗します):

ここでの望ましい結果は、Item1、Item3、および Item11 が 3 列の一番上の要素である 3 列のレイアウトです (私は取得します)。

Chrome では、次のように表示されます。

Firefox では、Item1、Item3、および Item11 に太字のテキストが表示されます

JSフィドル

小さな段落で問題が発生しています。写真でわかるように、テキストを左の列に流し続けたいのですが、代わりに段落が右にジャンプします。これは、列がどのように「埋められる」かに関連していると思いますが、私が見る限り、Chrome では column-fill プロパティはサポートされていません。どのような代替手段がありますか?

関連する CSS:

関連する HTML: