浮动定义列表中的每一个其他项目

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; }使用clear：两者都应该把dd放在它自己的一行上。

我认为做你想在这里做什么最好的办法是：

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

Answer 2

拆卸dd.float_odd浮动的伎俩。干杯!