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

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

从技术上讲，你应该使用clear dd { clear:left; }：两者都应该将dd放在自己的一行上。

我认为在这里做你想做的最好的方法是：

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

Answer 2

删除dd.float_odd上的浮动就可以了。干杯！