問題タブ [css-multicolumn-layout]

私は CSS3 列を試しています。明示的に 0 に設定しているにもかかわらず、上下の余白が追加されていることに気付きました。スクリーンショットは次のとおりです。

余白を黄色で強調表示しました。赤い四角形は、Firefox の Web 開発者ツールバー アドオンから描画されたブロック レベル要素のアウトラインです。

これが私のCSSです：

どうすればマージンを取り除くことができますか?

リクエストに応じて、私のコードをjsbinにアップロードしました。また、2 つの列の上部の不一致も示しています。列を使用しないと余白が表示されません。

次の HTML で、リストを 2 列で表示する最も簡単な方法は何ですか?

希望の表示:

このソリューションは、Internet Explorer で動作する必要があります。

高さが異なる可能性がある一連の要素 (div) を含むがdivあるとしますが、それらはすべて同じ幅になります。

私は現在、アイソトープ + メーソンリーでこれを達成していますが、一部のブラウザーはすでに CSS3 マルチカラムをサポートしているため、これらのブラウザーには CSS のみのソリューションを提供し、残りは Javascript にフォールバックすることを望んでいました。

これは私が試してきたCSSです：

ただし、これにより、要素の流れが上から下、左から右になります。代わりに、左右の上から下への流れが欲しいです。これは私が望むものの例です：

しかし、これは私が得るものです:

Flow multi-column elements left-right before top-downでは、同様のことが尋ねられますが、私は答えに満足できず、異なる高さの要素では機能しません。これは CSS 列でまったく可能ですか、それとも制限ですか?

列を使用してレスポンシブ レイアウトを作成しようとしていますが、場合によってはその数が変化しています。設定しましcolumn-count:3たが、4 つの div がある場合、それらは 3x1 ではなく 2x2 に配置されます。

7列などがある場合も同じバグが発生します。

JSFiddle のデモは次のとおりです: http://jsfiddle.net/BmG44/

(私はスタックでこのような他のいくつかの質問、特にCSS 列の下部にある余分なスペースを見てきましたが、質問者が提示したフィドルで問題が発生していることを確認できず、その解決策を試してもうまくいきませんでしたいずれかの方法。）

とにかく、列幅が適用された div の列の下に余分なスペースが追加されています。ここに例へのリンクがあります。私の問題は、列の下に余分な青いスペースがあることです。どちらかを外すと落ち着くようです。コンテナ div を縮小して、必要なスペースだけを使用することはできますか?

HTML:

CSS:

このプロパティを使用して、column-count3 つの列に複数の div があるページを設定しています。これは、大きな画面で見栄えがします。各 div の幅は、たとえば 500px (含まれる画像) に固定されています。

ただし、小さい画面で作業している場合、ブラウザーはコンテンツを元の \3 列内に強制しようとしますが、2 列に移動する必要があります。コンテンツがオーバーラップし始めたときに、コンテンツを 2 列に移動する最適な方法はありますか?

私は次の設定をしています：

リスト項目は動的に生成され、1 ページに 10 個表示されます。
それらを 2 列で表示し、各リスト項目をそれ自体のブロックとして表示したかったのです。次のリストの記事部分が次の列にあふれていることを除いて、これは問題なく機能しています。

私が何を意味するかを説明する画像については、以下のリンクを確認してください。
http://ubuntuone.com/4O59Hy13A14rzfPu3N5pcL
ご覧のとおり、赤い境界線は記事部分が次の列にあふれたリスト項目を表しています。

私のCSS：

リスト全体を 1 つのブロックのように振る舞わせるための助けをいただければ幸いです。
ありがとう