問題タブ [column-count]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 子アイテムを展開するときの列数リストの並べ替え
column-count: 3リストを 3 つの列に分割し、各リスト項目にスタイルを適用してdisplay: inline-block、リスト項目の子を同じ列に保持するために使用しています。子は と で非表示にmax-heightなりoverflow: hiddenます。
設定してクリック時に子を展開して表示したいのですmax-height: noneが、 column-count はすべての列のバランスを動的に均等にしようとするため、リストの順序が変更されます。それが列数の目的であることを理解しています。
似たようなものを使用したいのですがcolumn-count: 3、ページの読み込み後に「ロック」して、子を展開するときに並べ替えられないようにします。項目を 3 つの異なるリストに分割しなくても、それは可能でしょうか? 唯一の要件は、IE11 で動作することです。
これは、問題を説明するための私の codepen デモです。
css - CSS の列数は最初の子のみを尊重する必要があります
列数を使用して、ユーザー タスクに対する一種の週カレンダーを作成しようとしています。
今週のメイン div には、列数が 7 のプロパティがあり、常に 7 つの子が存在します。今週の 7 日間。この日の中にはタスクがありますが、タスクの数は可変であり、列数のロジックが壊れています。
column-count は、その中の最初の子だけを考慮しないのはなぜですか?
これが私が言っていることの例です: https://jsfiddle.net/nby5ctb2/
2 番目のリストでは、タスク 1、1.1、および 1.2 を互いに重ねて、子供がいない場合は、これらの日をスキップするようにしました。
私が使用したcssはこれだけでした：
ありがとう