0

私は次の設定をしています：http：//jsfiddle.net/GdDhT/

フローティングdivの行が折り返されると、2行目の最初の行が希望の場所になりません（その上のdivのサイズが原因です）

このようなクリアリングdivを追加することはできません：

画面が大きくなると、＃floating-div-1、2、3が1行で隣り合って表示されるためです。同じ理由で、特定のdivにクリアを追加することはできません。：nth-​​childcssルールに関する同じ問題。

これはレスポンシブデザインの一部であるため、divのサイズが異なるため、正確な幅の計算に頼ることはできません。

画面サイズに応じて、私が達成したい結果は次のようになります。ここに画像の説明を入力してください

また

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

4

3 に答える 3

1

n番目の子がおそらくあなたを助けることができます-すべての行の最初のdivが残っていることを明確にします:

#parent-div div:nth-child(2n-1){
    clear: left;
}

jsfiddle: http://jsfiddle.net/k5DXN/1/

于 2012-09-27T14:10:41.503 に答える
1

各 div を min-height の div ラッパーでラップすると、必要に応じて分割されます。しかし、それはラッパーが固定の高さであることも意味します。このタイプのソリューションは、最初のコンテンツ div の高さを取得し、残りのラッパー div をその高さに設定できる jQuery でうまく機能します。

jsFiddleを更新しました。ボックス シャドウは、ラッピングの最小高さを表示するためのものです。

于 2012-09-28T01:14:26.640 に答える
0

さまざまなユースケースを完全に理解しているかどうかはわかりませんが、次を追加します。

clear:left

#floating-div-3の下にそれをぶつける必要があります#floating-div-1。

于 2012-09-27T14:09:49.627 に答える