浮動定義列表中的每一個其他項目

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浮動的伎倆。乾杯!