flotter tous les autres éléments dans une liste de définition

Question

Salutations tous.

J'ai une liste de définitions comme ceci:

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

Le suivant fonctionne dans css Firefox:

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

... mais échoue dans IE (6/7/8). Les éléments ".float_odd" occupent tous deux la même ligne que le premier élément ".float_even". J'essaie d'obtenir les éléments ".float_even" et ".float_odd" pour occuper la même ligne, et tous les autres objets pour occuper leurs propres lignes. Les éléments ont une largeur variable et inconnue.

Des suggestions?

Answer 1

Techniquement, vous devriez utiliser dd { clear:left; } en utilisant clear: les deux devraient placer le dd sur une ligne qui leur est propre.

Je pense que la meilleure façon de faire ce que vous voulez faire ici est:

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

Answer 2

Retrait du flotteur sur dd.float_odd a fait l'affaire. À votre santé!