0

これは純粋なCSSでは不可能かもしれないことを理解していますが、要素のセットからn番目の行だけを選択するにはどうすればよいですか?これらの要素柔軟な幅のコンテナーにあり、要素自体がinline-block;

例:

  • それぞれ幅50pxの10個の要素のコンテナーで、コンテナーの幅は200pxです。セレクターは要素1から4を取得します(要素5以降は次の行でラップされています)

  • それぞれ幅50pxの10個の要素のコンテナーで、コンテナーの幅は250pxです。セレクターは要素1から5を取得します(要素6以降は次の行でラップされています)

注:参照用にこのフィドルを参照してください:http://jsfiddle.net/y7qCJ/-しかし、明らかにnth-childはこのようには機能しないので、私の質問はここにあります。

4

2 に答える 2

0

n番目の子はクロスブラウザではないため、手動で選択することに戻ります。

.container > li:first-child,
.container > li:first-child+li,
.container > li:first-child+li+li,
.container > li:first-child+li+li+li,
.container > li:first-child+li+li+li+li
{
   border:1px solid red; 
}

明らかに最初の5つをターゲットにします。HTMLがサーバー生成の場合は、サーバー側で生成されたインラインcssをヘッドに追加して、このルールを追加することもできます(変更可能であるため)が、HTMLが変更されない場合は、通常どおり.cssに追加できます。 。

フィドルを見る

アップデート:

対象となるLIの量をFLUIDレイアウトのブラウザーの幅に依存させたいように思われるため、疑似コードが次のJavaScriptソリューションを実行する必要があります。

on load/resize

  lielements[] = .container > li
  width = get .container width
  licount = abs(width/50)

  for(int i = 1; i < licount; ++i)
  {
     lielements[i].css = apply css class with width:50px to element
  }
于 2013-01-13T11:30:46.367 に答える
0

簡単な答え-CSSでは実行できません

于 2013-02-11T12:41:50.700 に答える