0

わかりましたので、これをできる限り説明しようと思います。カテゴリに基づいて、ホームページの投稿から注目の画像を取得するウィジェットを作成しました。現在、4つの投稿が含まれています。2 つ、3 つ、4 つ、または 6 つの投稿を追加するオプションが欲しいです。また、入ってくる投稿の数に基づいてレイアウトを変更したいと思います.2、3、4、または6つの投稿のみを表示することは可能ですか?入ってくる投稿の数に基づいてレイアウトを変更するにはどうすればよいですか.投稿の数ごとにcssのコンテナクラスを参照するか、それに沿った何かを参照すると考えていました。リンク、チュートリアル、またはアドバイスをいただければ幸いです。ありがとう - マイケル

4

1 に答える 1

0

純粋なCSS

これにより、CSS2 のフォールバックを使用して、目的を達成するための CSS3 メソッドが提供されます。基本的に、投稿アイテムを対象とするラッパーがあります。これは、そのラッパー内の直接の唯一の子になります (または、少なくとも特定の「タグ」タイプの唯一の子、ここではdiv)。次のように、子の数のみを 2、3、4、または 6 にすることができます (要求どおり)。

単純な HTMLdiv (これは要素である必要はありません。単に説明するだけです)

<div class="postWrapper">
  <div>This is a post</div>
  <div>This is the second post</div>
</div>

デフォルトの CSS2 を設定

IE7/8 の場合、このセレクターを使用すると、これら 2 つのブラウザーに表示される投稿の数に関係なく、これがデフォルトの表示になります。

.postWrapper > div { ... }

ファンシー CSS3 を設定する

これは投稿数に基づいて行われ、すべての CSS3 ブラウザーで表示されます。この一連のセレクターを次の順序で使用します(ここでは、カスケードを有利に使用しています)。

.postWrapper > div:nth-last-of-type(2),
.postWrapper > div:nth-last-of-type(2) ~ div {
   ... your two display css ...
}

.postWrapper > div:nth-last-of-type(3),
.postWrapper > div:nth-last-of-type(3) ~ div {
   ... your three display css ...
}

.postWrapper > div:nth-last-of-type(4),
.postWrapper > div:nth-last-of-type(4) ~ div {
   ... your four display css ...
}

.postWrapper > div:nth-last-of-type(6),
.postWrapper > div:nth-last-of-type(6) ~ div {
   ... your six display css ...
}

これが行っていることは、:nth-last-of-type()セレクターを利用して、ラッパーの子 div の数を「逆方向にカウント」し、それにスタイルを適用してからdiv、一般的な兄弟コンビネーターを使用して、それに続く~他のすべての div のスタイル.postWrapperを (理論上) 最初に設定することです。 div. を使用して最初の 2 つに対してこれを行い:nth-last-of-type(2)ますが、ラッパーに 3 つが含まれている場合は、使用する次のセレクターのセットが:nth-last-of-type(3)前のセレクターをオーバーライドします(2)。このように、カスケード内の一連のオーバーライド css を通じて、投稿要素の数の設定を変更します。

この fiddleでは、説明目的でこの手法のサンプルを確認できます。

注:カスケードを使用してオーバーライドしているため、以前に設定した css を確実に処理することが不可欠です。私のフィドルの例ではmargin、4 人のグループに a を付けたのに、6 人のグループではそれを削除したことに注目してください。グループ 6 で何も言及しなかった場合margin(つまり、オーバーライドなし)、6 のグループの要素 3 ～ 6 (ただし 1 ～ 2 ではない) には、4 のグループの以前の設定に基づいてマージンがまだ適用されていたはずです。 .

于 2013-01-16T02:33:51.297 に答える