2

<div>内にいくつかの がある場合<td>、それぞれを選択できますか?

たとえば、最初のフロートを左に、2 番目のフロートを右に作成したいとします。CSSだけで可能ですか？

.divE:first-child { float:left; }
.divE:last-child  { float:right; }

HTML

<table id="myTbl" cellpadding="0" cellspacing="0">
    <tr>
        <td>
        <div class="red">asdasd</div>
        <div class="divE"></div>
        <div class="divE"></div>
        content
        </td>
    </tr>
</table>
4

6 に答える 6

1

これを試すことができます：

:nth-child(2)

ただし、CSS3 を使用しているため、サイトを使用する必要があるユーザーに応じて、ブラウザーの互換性を確認してください。

http://caniuse.com/#search=nth

于 2012-05-04T21:34:54.970 に答える
1

はい、そうです ：）

.divE クラスをデフォルトで左にフロートするように設定できます。次に、隣接する兄弟セレクタ定義を使用して、divE クラスの div が divE クラスの別の div の直後に続く場合、次のように右にフロートする必要があります。

.divE {
    float:left;
}

.divE + .divE {
    float: right !important;
}

しかし、div にそれぞれ id を与えてから、float をそれぞれに設定する方が簡単ではないでしょうか? それとも、.floatRight または .floatLeft クラスを div に適用してから、これらのクラスのフロートを変更しますか? このようにして、クラスを再利用できます。

HTML を次のように変更した場合:

<table id="myTbl" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="3" width="25%">
    <div class="red">asdasd</div>
    <div class="divE floatLeft"></div>
    <div class="divE floatRight"></div>
    content
    </td>
</tr>

そして、次のように CSS を追加します。

.floatLeft {
float: left;
}

.floatRight {
float:right;
}
于 2012-05-04T22:06:08.950 に答える
0

htmlにdiv要素を追加しました。動作します。

css

.divE:last-child  { color:red; }
.divE:first-child { color:blue; }

html

<td>
<div class="red">asdasd</div>
<div><div class="divE">blue</div></div>
<div class="divE">red</div>
content
</td>
于 2012-05-04T21:43:14.137 に答える
0

:nth-child魔法です。

td div.divE {
    float: left;
}

td div.divE:nth-child(2n) { /* all even divs */
    float: right;
}

/* or just use "even" */
td div.divE:nth-child(even) {
    float: right;
}

すべての実際のブラウザーで動作します。つまり、IE8以下はありません。

詳細: http://css-tricks.com/how-nth-child-works/

于 2012-05-04T21:34:58.407 に答える
0

この場合、そのセレクターが機能するためには、その下の最初の要素である必要があります（代わりに機能し:first-childます）<td><div class="red">.red:first-child

代わりに使用できます:nth-child

.divE:nth-child(2) { float:left; }
.divE:nth-child(3) { float:right; }
于 2012-05-04T21:35:23.253 に答える
0

:first-childセレクターの組み合わせを使用して、次のようsibling selectorに 2 番目をターゲットにすることができます。div

.red{
    float: left;
}
.divE{
    float: left; //this is for the second .divE
}
.red + .divE{
    float: right; //this is for the first .divE
}

このようなソリューションは、IE7 以降で機能します。

于 2012-05-04T21:54:54.650 に答える