css - 「リストスタイル」で並べたまま、div を垂直方向に配置する

Question

この問題の解決策がまったく思いつかないところまで来ました。私が達成したいのは、たとえば 0 ～ 10 の値など、いくつかの div にコンテンツを入力することです。次に、それらを表示するときに、ユーザーのウィンドウサイズに対応する方法でリストする必要があります。大画面では、次のように表示されます。

1 | 4 | 7 | 10
2 | 5 | 8 
3 | 6 | 9

小さな画面では次のようになります。

div に Property を指定して試してみたところ、float: left;次のような出力が得られました。

1 | 2 | 3 | 4
5 | 6 | 7 | 8
9 | 10

問題は次のとおりです。順序が予想される出力と同じではありません。また、列ではなく「行」が最初に入力されています。cssとhtmlだけでこのようなことを達成する方法を知っている人はいますか?

score 3 · Accepted Answer

最新のソリューションは、CSS マルチカラムモジュールです。次のように使用できます。

.content {
    -webkit-column-width: 80px;
    -webkit-column-gap: 5px;
}

サポート、IE10+を確認してください。

ブラウザー (IE8 など) でサポートされていない場合は、http://jsfiddle.net/EN92F/1/のように、1 列のレイアウトに正常に低下しますが、それほど悪くはありません。

1 に答える 1