問題タブ [css-multicolumn-layout]

CSSを使用して2列のレイアウトを表示したいと思います。私が使用しているマークアップはこれです

1つの列の幅を20ピクセル、1つの列の幅をたとえば80ピクセルにする方法はありますか？

現在、未定義の長さ/高さの div がいくつかあります。いくつかのハイパーリンクがリストとして含まれています。これらの div を指定することで、ほぼ望ましい効果が得られます。float:left; width:150px; margin: 10px; ただし、最初の div に 1 つのリンクのみが含まれ、2 番目の div に 10 個のリンクが含まれるシナリオでは、次の結果が得られます (数字は div を表します)。

もちろん、望ましい結果は次のとおりです。

2列のレイアウト（CSS複数列レイアウトモジュールを使用）があり、2番目の列の上部に画像を配置したいと思います。テキスト内の休憩が入る場所に画像が配置されるように、自分で画像を配置する必要があるようです。

問題は、列も均等に入力する必要があることです。

JavaScriptなしでこれを解決する方法はありますか？これは画像の代わりにdivを使用しますが、アイデアはその列の上部に赤いブロックを配置することです。

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

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

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

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

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

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

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

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

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

追加した：

• jsFiddle プロトタイプ: http://jsfiddle.net/VXsAU/
• JS Bin プロトタイプ: http://jsbin.com/ebode5/

今日、私は本当に素晴らしいプロジェクト（CSS3 PIE）に出くわしました。これにより、CSS設定と通常のCSS3表記を使用して、IE6、IE7、IE8でもCSS3の丸みを帯びた角、影、グラデーションを使用できるようになります。

トリックを実行し、開発者にとって本当に透過的な* .htcファイルを使用します（設定して忘れてください-新しいページを作成したり既存のページを変更したりするときに追加のスクリプト呼び出しはありません（CSSを変更しない場合））。

使用できる複数列のレイアウトに似たものはないかと思います。コンテンツは上から下（左から右）ではなく、左から右（上から下）に配置されるため、フローティングはオプションではありません...

CSS3マルチカラムレイアウトに似たものを開発している人はいますか？

固定高さ要素で複数列の CSS レイアウトを使用しているため、ブラウザーはコンテンツを含めるのに必要な数の列を作成します。新しい列は常に他の列の右側に表示されますが、3 つの列の後で分割し、列 4、5、6 を 1、2、3 の下に表示したいと考えています。これは JS で実行できると思いますが、何を選択すればよいかわかりません。

このコードを考えると：

CSSの複数列のレイアウトを使用して、これらの3つのボックスを2つの列に配置したいと思います。

JSFiddleデモ

私のデモからわかるように、それは機能します。ただし、2番目のボックスが両方の列に断片化されているのではないかと心配しています。可能であれば、この要素の断片化を防ぎたいと思います。ボックスを複数の列に断片化しないようにブラウザに指示する方法はありますか？

（2番目と3番目のボックスの両方が2番目の列に簡単に収まることに注意してください。これは私が達成したい配置です。）

iOSプラットフォームにePubリーダーを実装しています。CSSの複数列レイアウトを使用してHTMLファイルをページ分割しました。純粋なテキストのHTMLファイルでは正常に機能しますが、画像を読み込むときに、画像はいくつかのページに分割されます。

これが私のマルチカラムスタイルです：

私は次のスタイルを実装しようとしました：

しかし、それは機能していません。画像が分離しないようにするにはどうすればよいですか？

次の HTML を検討してください。

および次の CSS:

現在のところ、Firefox はこれを次のようにレンダリングします。

4 番目の項目が 2 番目と 3 番目の列に分割されていることに注意してください。どうすればそれを防ぐことができますか?

望ましいレンダリングは次のようになります。

また

編集:幅は、不要なレンダリングを示すためにのみ指定されています。実際の場合、もちろん固定幅はありません。

Rails アプリで Blueprint CSS を使用しています。これを、各アイテムの周りにボックスを配置した 4 列のレイアウトにしています。4 個のアイテムまたは 8 個のアイテムがある場合、すべて問題なく、2 行の製品があります。9 番目の製品または 4 で割り切れないものがある場合、行と項目がバラバラになり、次の列に飛び出します。誰が問題が何であるか知っていますか？