4

css3 の column-count および column-gap オプションを使用して複数列のレイアウトを実装しています。多くの div は、メイン div 内の 2 つの列に配置されます。問題は、ボーダーと重なる内側の div でドロップダウン メニューを使用したいことです。

問題: css3 列オプションは、ドロップダウンがGoogle Chromeの親 div と重ならないようにブロックします。z-index と overflow オプションを変更してみました..何かアイデアはありますか? ありがとう！

プランカー: http://plnkr.co/edit/8CqzQkvP9emIWvSXBses?p=preview

編集: Chrome は css3 列を処理しているようで、一般的に非常にバグがあります。たとえば、ブートストラップグリフィコンをボタンに配置するとすぐに、いくつかの問題が発生します。多くの場合、ドロップダウンを開くには 2 回のクリックが必要です。また、Firefox は、列間で div をより均等に分散しています。それらの問題について何も見つかりませんでした..?

4

1 に答える 1

1

まずz-index、親と比較して、ネストされた要素では何もしません。列をオーバーラップさせようとしているため、実際にオーバーラップするための要素が DOM にありません。列は、レイアウトのために明示的に意図されたものではありません。代わりに、横方向のレイアウトで読みやすい長いテキストを作成することを目的としています。

Chrome で表示されているのは、複数列レイアウトの W3C 仕様と、オーバーフローの処理方法から直接得られたものです。ここでのオーバーフローの設定は、列には関係なく、列のコンテナーにのみ関係します。

ここで求めているレイアウトを実現したい場合は、960 GridやBootstrap の grid systemなどのグリッド システムを検討することを強くお勧めします。

于 2015-04-14T17:00:46.563 に答える