плавать каждый другой элемент в списке определений

Question

Приветствуем всех.

У меня есть список определений, например, так:

<dl> 
<dd>This is an item on a new line</dd> 
<dd class="float_even">This item should sit on a new line</dd> 
<dd class="float_odd">This item should float next to the previous item</dd> 
<dd class="float_even">This item should sit on a new line</dd> 
<dd class="float_odd">This item should float next to the previous item</dd>   
<dd>This is an item on a new line</dd> 
</dl> 

Следующие CSS работает в Firefox:

dd { clear:both; } 
dd.float_even { float:left; } 
dd.float_odd { float:left; clear:none; } 

..., но не в IE (6/7/8). Элементы «.float_odd» занимают ту же строку, что и первый элемент «.float_even».

Я пытаюсь получить элементы «.float_even» и «.float_odd», чтобы занять одну и ту же строку, и все остальные элементы, чтобы занять свои собственные строки. Элементы имеют переменную и неизвестную ширину.

Любые предложения?

Answer 1

Технически вы должны использовать dd { clear:left; }, используя ясно: оба должны поместить dd на собственную линию.

Я думаю, что лучший способ сделать то, что вы хотите сделать здесь:

dl { width: 400px; } 
dd { width: 200px; float: left; overflow: hidden; } 

Answer 2

Удаление поплавка на dd.float_odd сделал трюк. Ура!