問題タブ [css-multicolumn-layout]

幅と高さが設定された水平スクロール コンテナー内に一連のリストを収めようとしています。この問題を解決するために CSS 列を使用しています。ただし、プロパティ「column-fill: auto」はリスト項目を正しい方法で表示していますが、「ul」は表示方法の変更に合わせてサイズ変更されていません。これを修正する方法はありますか、それとも別の CSS ソリューションがありますか?

問題の例を次に示します。

更新: すべてのブラウザで動作する最新のコードは、この JSFiddle にあります - https://jsfiddle.net/webvitaly/yu00ugft/5/

純粋な CSS アプローチを使用してレスポンシブ列を作成しようとしています。

列の上部にギャップ/マージンがある場合があるという問題があります。

試して調べるための JSFiddle リンク - https://jsfiddle.net/webvitaly/yu00ugft/

それを解決する方法は？

CSS:

HTML:

HTML と CSS を使用して 2 列のレイアウトを作成しています。これらの列内には、これらのリスト項目の 1 つがクリックされたときに表示される selectmenu があります。従来の選択オプション メニューのように、この selectmenu をクリックした項目に対して相対的に配置し、その周囲の要素のレイアウトに影響を与えないようにする必要があります。ただし、これは自動提案入力/メニューであるため、従来の選択は使用できません。そのため、相対的に配置された親内のメニュー コンテナーに絶対配置されたアイテムを使用しています。

私が欲しいもの：

私の問題は、絶対に配置されたアイテムが列の一部であるかのように壊れていることです。これは私が理解していることすべてに反しますposition: absoluteが、仕様の範囲内にあるようです。さらにイライラするのは、ブラウザが意図したとおりに絶対配置されたアイテムを表示することです（親に設定しない限りposition: relative）が、親またはselectmenuに設定する必要がありposition: relativeます（絶対配置されたアイテムとして）対応する要素に隣接して表示されるとは限りません。

私が得るもの：

フレックスボックスを使用して列のようなレイアウトも試しましたが、これを使用すると、従来の列レイアウトのように、アイテムを上から下に順番に表示する必要がある場合に、アイテムが左から右に表示されます。でフレックスボックスを使用できますflex-flow: column wrapが、コンテナ要素の高さを知る/設定する必要がありますが、これはできません。CSS 列は、高さを設定しなくてもリストを適切にラップします。

最も簡単な解決策は、コンテナの高さを明示的に設定せずに、どういうわけか絶対配置を偽造するか、フレックスボックスにアイテムを順番に（上から下に）表示させることだと思います。どちらも試してみましたが、満足のいく結果は得られませんでした。私は JavaScript ソリューションを使用することにオープンですが、それを避けて CSS のみでこれを解決するために最善を尽くしています。

これは、私の問題を示す例を含むコードペンです。HTML から親クラスを削除して、アイテムが意図したとおりに絶対配置されるようにします (これにより、配置が正しくない場合があることに注意してください)。

inline-block横柱で作りたい。inline-blockコンテンツに合わせて最小数の列として幅を持つ必要があります。

問題は、ブラウザーによる奇妙な列処理です。

Chromeは、おそらく列なしで幅を決定し、列を領域に配置します。最初のブロックには、1 列分の余分なスペースがあります。他のブロックは 1 列の幅を持つことができますが、それらはすべて異なる幅です。

Firefoxはすべてのブロック幅を 1 列に設定し、thext はそれをオーバーフローさせます。要素またはそのコンテナーのいずれかにスクロールバーを強制することはできますが、それらのいずれも正しい幅にすることはできません。

Chrome を Firefox のように動作させるハックがありますが、問題の解決には役立ちません。

実際には、次のようなものを取得する必要があります。

PS:ロシア語で同じ質問。

水平スクロール列があります。内部にヘッダーを持つテキストがいくつかあります。新しい列を作成し、それに属する列の上のすべてのスペースを占有する各ヘッダーを作成する必要があります。

とか、ぐらい：

しかし、私ができる最善のことは（ちなみに、Firefoxでは失敗します）：

sを使用して目的の結果をアーカイブしようとしinline-blockましたが、そこで別の問題が発生しました。また、負のマージン、絶対配置、および を使用していくつかの方法を試しましtransformたが、成功しませんでした:列の上に移動することはできません(absoluteコンテナコンテキストを除いて:列ベースの水平方向の配置を忘れています)。

最も単純なコードhttps://jsfiddle.net/07n6L2yh/10/

より複雑なバージョン: https://jsfiddle.net/07n6L2yh/11/

PS:ロシア語で同じ質問。

私は周りを見回しましたが、私の問題を説明するものは何も見つかりませんでした。メイン タグに 5 つのセクション要素があり、そのうちの 3 つにテキストと画像が含まれています。

列数を使用して列の各セクションを並べて取得しようとしていますが、テキストと画像のない最後の 2 つの列は、互いに隣り合うのではなくスタックします。下に写真を添付し​​ました。

同じ画像とテキストを追加すると、正常に機能しますが、まだコンテンツがないため、列を空にすることができるかどうかを知りたいです。

コード：

Chrome でのみ表示される CSS 列レイアウトに関して、非常に奇妙な動作に遭遇しました。

列化されるアイテムの全体的な高さに応じて、左オフセットがシフトされ、アイテムの実際の位置を特定するのが難しくなります。レンダリングは問題ないように見えますが、要素を調べると、実際にはかなりオフセットされていることがわかります。

例を次に示します: https://jsfiddle.net/vx8h8u46/

.panel 要素を調べると、境界矩形が左から始まらないことがわかります。

ボタンをクリックして 1 つの項目を削除すると、突然境界四角形が正しくなります。

これは、パネルの高さが特定のしきい値を超えると発生するようですが、現時点では推測にすぎません。回避策はありますか？

ご覧のとおり、css は最初の列でのみ動作し、item-meta を表示します。なにが問題ですか？すべてのテキスト/メタは適切な場所にあります。調べると、そこにあります。何らかの理由で、不透明度を 1 に戻したくありません。最初の列で明らかに機能していて、すべて同じコードであるため、奇妙です。また、暗いオーバーレイが表示されているため、アイテムは明らかに機能しています。

ウィンドウのサイズを変更して 2 列表示にすると、1 列目に多くの投稿が表示され、正常に動作します。

ここにリンクがあります。

[編集]: 2 列目は、十分な時間ホバーすると表示されます。

CSS: