css - float 定义列表中的所有其他元素

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:both 应该将 dd 放在它自己的一行上。

我认为在这里做您想做的最好的方法是:

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