Выбор divs в td

Question

Если у меня есть пара <div> s в пределах <td>, могу ли я выбрать каждый из них?

Например, я хочу сделать первый поплавок влево и второй поплавок вправо. можно ли использовать только 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> 

Answer 1

Да это :)

Вы можете установить .divE класса поплавок влево по умолчанию, а затем вы можете с помощью смежного селектора родственного определить, что, когда DIV класса нырнуть сразу следует другому DIV класса нырять, он должен плавать прямо, как это:

.divE { 
    float:left; 
} 

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

Но не проще ли просто дать дивы идентификатор каждого, а затем установить поплавки друг? Или просто примените класс .floatRight или .floatLeft к divs, а затем измените поплавки этих классов? Таким образом, вы можете повторно использовать классы.

Если вы изменили 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; 
} 

Answer 2

Вы можете дать этому попытку:

:nth-child(2)

но вы работаете с CSS3, поэтому не забудьте проверить вашу совместимость браузера в зависимости от того, кто необходимо использовать ваш сайт:

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

Answer 3

: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/

Answer 4

в этом случае :first-child бы быть первым элементом под <td> для этого селектора работать (что вместо <div class="red"> так .red:first-child будет работать)

вы можете использовать вместо этого :nth-child

.divE:nth-child(2) { float:left; } 
.divE:nth-child(3) { float:right; } 

Answer 5

Я добавил элемент div в html, он работает.

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> 

Answer 6

Используя комбинацию селектора :first-child и sibling selector позволяют целевой второй div так:

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

Такое решение работает от IE7 до.