問題タブ [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.
css - CSS の列数が領域全体を埋めていない
css3 ルールで項目を 8 列に表示しようとしていますcolumn-count。ただし、6 と表示されることもあれば、7 と表示されることもあります。アイテムに特定の幅を設定しようとしましたが、何も機能しないようです。
html - 絶対配置要素が CSS 列内で壊れないようにするにはどうすればよいですか?
HTML と CSS を使用して 2 列のレイアウトを作成しています。これらの列内には、これらのリスト項目の 1 つがクリックされたときに表示される selectmenu があります。従来の選択オプション メニューのように、この selectmenu をクリックした項目に対して相対的に配置し、その周囲の要素のレイアウトに影響を与えないようにする必要があります。ただし、これは自動提案入力/メニューであるため、従来の選択は使用できません。そのため、相対的に配置された親内のメニュー コンテナーに絶対配置されたアイテムを使用しています。
私が欲しいもの：
私の問題は、絶対に配置されたアイテムが列の一部であるかのように壊れていることです。これは私が理解していることすべてに反しますposition: absoluteが、仕様の範囲内にあるようです。さらにイライラするのは、ブラウザが意図したとおりに絶対配置されたアイテムを表示することです（親に設定しない限りposition: relative）が、親またはselectmenuに設定する必要がありposition: relativeます（絶対配置されたアイテムとして）対応する要素に隣接して表示されるとは限りません。
私が得るもの：
フレックスボックスを使用して列のようなレイアウトも試しましたが、これを使用すると、従来の列レイアウトのように、アイテムを上から下に順番に表示する必要がある場合に、アイテムが左から右に表示されます。でフレックスボックスを使用できますflex-flow: column wrapが、コンテナ要素の高さを知る/設定する必要がありますが、これはできません。CSS 列は、高さを設定しなくてもリストを適切にラップします。
最も簡単な解決策は、コンテナの高さを明示的に設定せずに、どういうわけか絶対配置を偽造するか、フレックスボックスにアイテムを順番に（上から下に）表示させることだと思います。どちらも試してみましたが、満足のいく結果は得られませんでした。私は JavaScript ソリューションを使用することにオープンですが、それを避けて CSS のみでこれを解決するために最善を尽くしています。
これは、私の問題を示す例を含むコードペンです。HTML から親クラスを削除して、アイテムが意図したとおりに絶対配置されるようにします (これにより、配置が正しくない場合があることに注意してください)。
html - IE11 で CSS の列数が無視される
これは私が自分のサイトで抱えている問題です。js フィドルで問題を再現しました。列数を使用して幅が均一なセクション タグを使用して 5 つの列を作成しようとしています。これは chrome/firefox/edge では正常に動作しますが、インターネットではExplorer 11 では無視され、セクションがブロックとして表示されます。
列数は IE でサポートされている必要があると読んだので、なぜ無視されているのか非常に混乱しています。これはバグですか、それとも何か間違っていますか? 私のフィドルは以下です
https://jsfiddle.net/gqdL46j4/
html
CSS
css - column-count に 3 を指定すると、4 列目が表示されます
CSS パディングと組み合わせて css 'column-count' を活用しようとしています。また、列数を 3 に指定すると、コンテンツが収まらない場合、ブラウザーは 4 番目の列の一部をレンダリングすることを観察しています。以下に示すように
ここに JSFidle があります - > https://jsfiddle.net/w40jcykp/1/
これは Chrome & Edge で見られます。これは既知の問題ですか、それとも回避策はありますか?
よろしくお願いします。
以下CSS。
css - Chrome で列数が機能しない
4 列に分割されたテキストがあり、Safari では完全に機能します。Google Chrome で 2 列しか表示されない理由がわかりません。
Chrome 55.0.2883.95 (64 ビット) でテスト済み
どんな助けでも大歓迎です。
css - 列数が column-count よりも少ない場合の Chrome 列のバグ
プロパティを使用すると、Chrome で問題が発生しcolumn-countます。その中にいくつかのアイテムがあるdivがあるので、column-count: 3;
3つ以上のアイテムがある場合はうまく機能しますが、2つしかない場合は同じ行ではなく同じ列に表示されます。これは Chrome でのみ発生します。
コード例:
