5

私のサイトにはグリッドシステムがあります。これは、グリッド内の6つおきのアイテムにスタイルが適用されて最初に設定されたものです。

li:nth-child(5n+1){ margin-left:0 }

私は自分のサイトをレスポンシブにする過程にあり、指定するブレークポイントがあります

li:nth-child(3n+1){ margin-left:0 }

しかし、問題は、それが以前のスタイルの5n + 1をまだ解釈していることです。これは、私が望んでいないことです。そのスタイルを無視するようにCSSに指示するにはどうすればよいですか。または、さらに良いことに、liアイテムが行の最初であるときはいつでも、左マージンが0で、他のすべてのアイテムのマージンがたとえば25pxになるように、流動グリッドを作成するにはどうすればよいですか？

4

3 に答える 3

12

親要素に負のマージンを使用することにより、メディアクエリを必要とせずに応答できます。

http://codepen.io/cimmanon/pen/dwbHi

.gallery {
  margin: -10px 0 0 -10px;
  overflow: hidden;
}

.gallery img {
    margin: 10px 0 0 10px;
    float: left;
}
于 2013-03-11T19:31:31.130 に答える
3

5n + 1のマージンをリセットする際の問題は、5n+1が3n+1に取って代わるか、またはその逆かがわからないことです。15番目の要素で、これらのスタイルルールが衝突するためです。

一度にルールごとに1つのセレクターしか処理しないため、これらは同様に具体的です。:nth-child()したがって、ブレークポイントの3n+1ルールの前に5n+1ルールを配置し、マージンをリセットする必要があります。ゼロ値は5n+1ルールの範囲内です。このように、3n + 1ルールは、両方のルールに一致する要素に対して優先されます。

CSSを使用して行の最初の項目を選択する方法はありません。これは、行の最初の項目が何であるかが明確にわからないためです。使用する正確なマージンがわかっていて、処理するブレークポイントが多すぎない場合は、これが適切な代替手段です。

于 2013-03-11T17:51:45.380 に答える
0

試す：

li:nth-child(5n+1):not(:nth-child(3n+1)){ margin-left:0 }

セレクターは缶に書かれていることを行い、ブラケット内の:notセレクターに一致する要素を選択しません。

また、2つのルールが衝突し、どちらにも優先順位がない場合は、CSSの最後に表示されるルールが使用されます。li:nth-child(5n+1)スタイルシートの後に置く方が簡単かもしれませんli:nth-child(3n+1)。

編集：あなたの質問に対する@cimmanonのコメントは、非常に優れた代替方法です。

于 2013-03-11T18:01:11.180 に答える