3

私は自分のブログに取り組んでいます。> 1020px wideこのブログを表示すると、左から右に投稿を読み込む3つの列を使用します(つまり、投稿1を左の列に配置し、投稿2を中央に配置し、3つを右に配置してから開始します。再び左の列から):

ここに画像の説明を入力してください

これはうまく機能しますが、ブラウザが下に縮小する1020と、レイアウトは単一の列に変換されます。これは、列を互いに下に配置することで視覚的に簡単に実現できます(見た目はきれいです)が、これにより投稿の順序が乱れます。合計9つの投稿がある場合、最初の3つの投稿は実際には投稿1、4、7になります。

純粋なCSS管理レイアウトのクリーンさを維持したいので、 (3列ではなく)単一のコンテナーにフロート要素を含む上記の3列レイアウトを作成するコツがあるかどうか疑問に思います。

私は少し遊んで、左に浮いて3タイルごとにクリアしましたが、もちろん、3タイルごとに、上の「行」の最も高いタイルの下の「行」に配置することになります。

4

1 に答える 1

5

純粋な CSS が必要だとおっしゃっていたのは承知していますが、jQuery ライブラリ Masonry はこの種のもの用に特別に設計されています。

http://masonry.desandro.com/

そうでなければ、純粋なクロスブラウザー互換の CSS でこれを実現する良い方法を見つけられませんでした。

于 2012-09-21T00:01:44.230 に答える