63

複数列形式でユーザーに表示されるメニュー システムを構築しています。CSS3のcolumn-countプロパティを使用すると、90% の精度が得られますが、Chrome での配置に問題があります。

メニューは比較的シンプルです。

  • column-count プロパティによって複数の列に分割された順序付けられていないリスト
  • 列は順番に入力する必要があるため、column-fill: auto
  • メニュー項目はリスト項目として表されます
  • 各リスト項目にはクリック可能なアンカー タグがあり、display: ブロックを介して完全に拡張されます

私が抱えている配置の問題は、各リスト項目の上枠と背景色で最も顕著です。Firefox では、リスト項目は常に各列にきれいに配置され、前/次の列ににじみ出すことはありません。Chrome では、整列はクラップシュートであり、存在するリスト項目の数とパディング/マージンのプロパティによって異なります。

簡単なテスト ケースのコードをここに投稿しました: http://pastebin.com/Ede3JwdG

問題はすぐに明らかになるはずです。Chrome では、2 番目の列の最初のリスト項目が最初の列に戻ってしまいます。リスト項目を削除 (クリック) すると、配置がさらに崩れることがわかります。

リスト項目のパディング/マージンを微調整しようとしましたが、うまくいきませんでした: Chrome には、複数列のレイアウトでコンテンツをフローする方法に欠陥のあるアルゴリズムがあるようです。

列数を完全に捨てなかった主な理由 (手動生成/Columnizer などを支持して) は、メニュー システムにも複数のサブメニューにわたるドラッグ アンド ドロップ機能が含まれており、メニュー データが配置されているためです。まとまりのあるリストベースの階層により、クリーンなコードが作成されます。

Chrome で配置の問題を修正する方法はありますか、それとも今のところ列数をあきらめるべきですか?

追加した：

4

11 に答える 11

23

margin-*複数列のコンテナ内の要素にプロパティを適用することで、垂直方向に整列した不均一な列のバランスをとることができました。

.content {
  column-width: 15em; /* or could be column-count, however you want to set up multi columns */
}
.content > section {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}
于 2012-03-06T11:02:54.203 に答える
16

私も遊んでみましたが、オンラインで見たいくつかの情報源は、webkit の既知の問題であるように思われます。ここで良い内訳を見つけることができます: http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/

いつかCSS3！

http://welcome.totheinter.net/columnizer-jquery-plugin/のようなjQueryプラグインを試してみてください。

于 2011-03-15T16:46:35.347 に答える
7

複数列のリストで垂直方向の配置に問題がありました。問題は、リスト li で下パディングを使用していたことであることが判明しました。代わりに、li スタイルを下マージンを使用するように変更し、列を再び上に揃えました。

于 2015-03-13T23:38:25.393 に答える
2

これを解決するには、子要素の垂直マージンを削除し、子要素の行の高さを増やして必要な間隔を複製しました。

また、子のマージンを削除して孫のパディングに変換することで、この垂直方向の配置の問題を修正できることにも気付きました。

于 2016-12-19T22:14:49.710 に答える