css - 柔軟なdivポジショニング

Question

ページにいくつかのdivがあり、すべて同じ幅ですが高さが異なります。それらはすべて1つのdivにあり#note1PreviewDivます。それらはすべてクラスを共有します。このクラス.noteには、（とりわけ）次のcssコードがあります。

.note{
    width: 160px;
    padding: 10px;
    margin: 10px;
    background: #e3f0ff;
    float: left;
}

私はfloat: left;それらがすべて自動的に整列するので、それらが互いにうまく整列するだろうと思いました。

これがどのように見えるかのプレビューです：

そして、ポジショニングは次のようになります。

私はあなたがその考えを理解したと思います。どういうわけか、一番左のdivの高さが、2行目の他のdivを右に押しているように見えますが、それは推測にすぎません。

ご協力いただきありがとうございます！

チャールズ

score 3 · Accepted Answer

CSSだけではこれを簡単に行うことはできません。

CSS3には列レイアウトと呼ばれる新機能がありますが、ブラウザーのサポートはあまり良くありません。IE9以下はサポートしていません。

http://designshack.net/articles/css/masonry/およびCSS3ソリューションの最後の例を参照してください。

実装とブラウザのサポートを容易にするために、これらのjs/jQueryオプションをご覧ください。

score 0 · Accepted Answer

列ベースのアプローチを採用せず、各列を表すブロック要素を追加しない限り、必要な種類のレイアウトは非常に困難です（不可能ですか？）。画面サイズに基づいた動的なレイアウトが必要な場合、これは明らかに柔軟な数の列では機能しません。

そうは言っても、JavaScriptを使用して要素を動的に列に配置し、画面サイズに一致させることができます。

score 0 · Accepted Answer

親コンテナの高さは固定値ですか? そうである場合は、親コンテナーの高さを auto に設定し、overlow プロパティを hidden に設定してみてください。

3 に答える 3