問題タブ [column-count]

div 内に多数のテーブルを表示しています。CSS column-count を使用して、この div を列に分割しました。

ただし、ベースラインにより、セルを拡大して互いに隣接するテーブルに並べます。高さを指定しても、 !important は無視されるようです。

どうすればこの動作を防ぐことができますか?

更新 1:

div (id="data") 内に含まれる HTML の例のテーブル

CSS

まとめ

CSS プロパティを使用してcolumn-count、ピンタレストのようなレイアウト デザインを実現しています。しかしcolumn-count、Youtube Embed を入れると<iframe>、この iframe が消えてしまいます。消えた理由を教えてください。

詳細

グリッド レイアウトについては、この例に従います。それはうまくいっています。しかし、代わりに Youtube video iframe if を入れると、<img>再生が始まると消えてしまいます。これが私のコードの例です（混乱しないように、すべてのスタイルを入れたわけではありません）。ご覧のとおり、ビデオの再生が開始されると消えます。しかし、*-column-countCSS から行を削除すると、機能します。しかし、今回はPinterest スタイルを失っています。

1 から任意のリスト項目で動的に埋められる順序付けられていないリストがあります。このリストは、列数を使用して列としてスタイル設定されています。リストに 3 つ以上の項目があれば、すべて問題ありません。しかし、アイテムが 2 つまたは 1 つしかない場合は、それらを真ん中に配置したいと考えています。

HTML:

CSS:

デモ: http://codepen.io/anon/pen/NPBKBd

ここに画像があります：

ラッパーで使用column-countし、ラッパー内のコンテナーがborder-radius適用され、コンテナー内のコンテンツがオーバーフローしている場合、最初の列を除くすべての列でコンテンツが完全に消えます。

これが私の例です: https://jsfiddle.net/f4nd7tta/
赤い半円は最初の列にしか見えません。なぜですか?

この css コードを使用してページの列を管理しています (wordpress 4.2.2 + Visual Composer Plugin を使用しています):

Firefox では問題なく動作しますが、Chrome と Safari (webkit) では段落全体が消えます。なにか提案を？

編集: スクリーンショットを追加できません (画像を投稿するには、少なくとも 10 個の評判が必要です)。そのため、Web サイトの リンクがあります。

いくつかの列プロパティを使用して、いくつかの項目を 3 列にリストしています。しかし、サファリだけに問題があります:

プロパティを使用するborder-radiusと、2 列目と 3 列目のテキストが消えます。

ここにcodepenリンク：http://codepen.io/arokh/pen/zGyyKx

したがって、54 行目border-radius: 5px;で 0 に設定すると、もう一度テキストが表示されます...

border radiusプロパティを使用してテキストを表示するアイデアはありますか?

さまざまな画面サイズの列の量を制御するために、いくつかのメディア クエリを使用しています。ページが読み込まれると、うまく機能します。ただし、ウィンドウの幅をほとんどゼロに縮小してから再度全幅に拡大すると、column-count4 に指定したにもかかわらず、2 列しか表示されず、右側の 2 が空白になっていることに気付きました。列である必要があります。すべてのコンテンツはまだそこにあります。左側に押しつぶされただけです。現在適用されている CSS ルールを見ると、まだcolumn-count4 と表示されています。何が起こっているのかわかりません。ヒントをください？ありがとう！

私が使用している関連CSS：

作業例: http://jsfiddle.net/1o12sqsq/

スニペット:

Firefox では問題なく表示されるため、Chrome 固有の問題のようです。