問題タブ [column-count]

プロジェクトにBootstrap 4石積みカードレイアウトを使用していますが、そのプロジェクト内に<select>はカスタムスタイルがあります。カスタム スタイルの一部は、CSS を使用して作成されたキャレット:afterです。ブラウザーが異なれば結果も異なります。誰かが解決策を持っている場合に備えて、ここに投稿したいと思いました。これが Bootstrap の問題なのか CSS 仕様の問題なのかはわかりません。

• Chrome Canary: すべて問題ないようです
• Chrome: 最初の列は問題ないように見えますが、最初の列以降の列は悪く見えます。モバイルに移動しない限り (ここでは 1 列のみに設定しています)、そこには問題なく表示されます。複数の列がある場合のみです。
• Firefox: すべて問題ありません
• Safari: 最初の列が表示されますが、最初の列の後の列はキャレットとテキストが表示されません。

Codepen のリンクは次のとおりです: http://codepen.io/derekshull/pen/GZQaRY

このレイアウトをブートストラップとマージしたい:

https://jsfiddle.net/clankill3r/j9hj8rw8/

（ここでは、列はギャップなしでバランスが取れています。これは、ブートストラップでは実現できないことです（可能であれば、お知らせください）。

問題は、column-count の使用を開始するとすぐに、レイアウトが壊れているように見えることです。

（画像右側をご確認ください）

なぜそれが起こるのですか？

https://jsfiddle.net/clankill3r/t528eozd/4/

回避策はありますか？

申請しました

しかし、iOSでは機能しません。

「column-count」を使用して、互いに上に整列したアイテムのグリッドを作成しています (" column-gap: 0px")。

見た目は素晴らしいですが、無限スクロールを実装しようとすると問題が発生します。

最初のグリッドの下に同じ構造の別のグリッドを追加していますが、最初のグリッドのアイテムに揃えることができません..セクション間に不要なギャップを作成しています。

上記のオブジェクトへの配置に関するオプションはありますか?

私は、本当に役に立たないvertical-align標準オプションしか見つけませんでした。

これはどのように見えるかです: (アイテムは異なる高さを持っています)

列数グリッドを使用して、ポートフォリオ ギャラリーをレスポンシブにするのを簡単にしたいと考えていました。サイトを作り直していて、ライトボックスのコーディングは以前のものと同じで、うまくいきました。

ただし、グリッドを修正すると、画像をクリックして大きなサイズに拡大すると、画像のサイズに関係なくページ全体に拡大されます。グリッドを削除すると正常に動作します。何が問題になる可能性があるかについて何か提案はありますか?

ギャラリーの私のhtmlは次のとおりです。

ギャラリーの CSS:

そしてライトボックスCSS：

CSSの列数を使用しながら、すべての列にセパレーターを使用したい。

HTML:

CSS:

私は何かのようなものをしたい -

私は試します：

li の右側の境界線のみで、最後の列にはありません。

css プロパティ を使用して 3 列のコンテナがcolumn-countあり、各列が で歪んでいるtransform: skewX(-15deg)場合、列内で別の歪曲操作を適用すると、2 列目から影響を受ける要素が見えなくなります。

問題を示す小さな例を作成しました: https://jsfiddle.net/yvkeax2s/4/

Google chrome (バージョン 51.0.2704.103 m) では、次のようになります。

Firefox (47.0) では、正しい期待どおりの結果が得られます。

(歪んだブロックが切り捨てられるのは別の問題のようで、現在は気にしていませんが、まだ注目に値する可能性があります)

これは chrome with のバグのようcolumn-countですが、これを機能させるための回避策はありますか?

編集: バージョン 53.0.2780.0 カナリアでこれをテストしたところ、機能したため、バグは将来的には既に修正されているようです。