4

まず、非常に明確にするために、ここで私が達成しようとしていることを示すJSフィドルを示します。

http://jsfiddle.net/bb_matt/VsH7X/

ここに説明があります-私の理論的根拠:

1140グリッドフレームワークを使用してレスポンシブサイトを作成しています。かなり複雑なレイアウトです。

定義された任意の列サイズにドロップできる再利用可能なシンプルなギャラリークラスを作成し、メディアクエリを使用して、関連するパーセンテージ幅をli要素に適用します。各li要素の右マージンは5%です。メディアクエリでnth-child(xn + x)を使用して、各行の最後の右マージンを削除しています。

すべてがうまく機能します-レイアウトのサイズが変更されると画像のサイズが変更され、行のギャラリーアイテムの数はパーセンテージに基づいて定義したとおりに機能します。

修正すべき唯一の残りの問題は、行間をクリアすることです。HTMLマークアップを追加できません。また、過度に複雑なjqueryの修正を避けたいと考えています。

私はこれを修正する2つの方法を知っていますが、どちらにも熱心ではありません。

最初の修正は、単にdisplayを使用します。li要素のインラインブロックを上に垂直に配置すると、すべてが正しく流れます...ただし、すべてのパーセンテージが撮影され、ギャラリーアイテムが割り当てられたスペースにうまく収まりません。

2番目の修正では、リストアイテムに高さを指定します。これは私が必要に応じて下るルートです-解像度に応じて異なる高さが必要になります-大したことではありませんが、それほどきれいではありません。

4

1 に答える 1

6

ここであなたのフィドルを更新しました:http://jsfiddle.net/VsH7X/5/

clear: left新しい各行の最初の項目にを追加しました。

ul.gallery li:nth-child(5n+6) {
  clear: left;
}

疑似クラスはIE6-8 :nth-child、またはFF3以下では機能しないことに注意してください。</ p>

于 2012-09-25T19:16:00.973 に答える