0

を使用して市松模様を作成しようとしてnth-childいますが、期待どおりに機能していません。

以下の例では、チェッカーボードパターンを作成するためpに、の反対側に1つおきに設定します。divはpに設定されwidth:50%;、divはに設定されwidth:100%ます。

実演するためにjsfiddleを設定しました：

HTML

<div id='check'>
  <p>Odd</p>
</div>

<div id='check'>
  <p>Even</p>
</div>

CSS

#check { 
  float:left; 
  width: 100%;
}
#check p {  
  width: 50%;
  background: #DDD;
}

#check p:nth-child(odd) {
  float:right;
}

誰かが私にこれを機能させる方法を見せてもらえますか？

4

4 に答える 4

1

は親コンテナに基づいているため、すべてのp要素を1つdivにまとめる必要があります。これが修正されたフィドルです。。このコードを使用します：nth-child

HTML

<div id ='check'>
    <p>Odd</p>
    <p>Even</p>
    <p>Odd</p>
    <p>Even</p>
</div>

CSS

#check { 
    float:left; 
    width: 100%;
}
#check p {  
    width: 50%;
    background: #DDD;
    clear:both;
}

#check p:nth-child(odd) {
    float:right;
}

#check p:nth-child(even) {
    float:left
}
于 2013-03-25T22:04:40.253 に答える
0

同じIDを使用して2つの要素を持つことはできません。クラスの使用に切り替えたいと思います。

http://jsfiddle.net/wE6e4/をデモンストレーションするためのフィドルを作成しました

#checkerboard {
    width: 500px;
}

.check { 
    float:left; 
    width: 100px;
    height: 100px;
}

.check:nth-child(odd) {
    background: #DDD;
}

.check:nth-child(even) {
    background: #fff;
}
于 2013-03-25T21:59:25.813 に答える
0

まず、IDを複数回使用しています。IDは一意である必要があります。それに加えて、この行 は、のすべての奇数の子に#check p:nth-child(odd)指定されたルールを設定することを意味しますが、これは希望するものではありません。あなたはすべてを奇妙にしたい（私は自由にIDをクラスに変更した）。したがって、それらをコンテナに入れて、次のように言う必要があります。p#check.check

#cont .check:nth-child(odd) {
    float:right;
}

これがフィドルです：http：
//jsfiddle.net/Wbnks/

于 2013-03-25T22:06:36.420 に答える
0

CSSを最小化しようとしている場合は、次のように試すことができます。

HTML：

<div class="checkerboard">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
</div>

CSS：

.checkerboard p {
    float: left;
    width: 50%;
}

.checkerboard p:nth-child(4n-2), .checkerboard p:nth-child(4n-1) {
    background-color: #999;
}

http://jsfiddle.net/L9ng7/5/

于 2013-03-25T22:18:03.070 に答える