dt（浮動左邊）和第一個dd（浮動右邊）在同一行上

Question

我正在使用定義列表來定義簡歷的各個部分。

我想每個dt和它的第一個dd顯示在同一行上。 dt應該在左邊，而dd在右邊。我想每個dt的剩餘的dds顯示在dt之下。

我也需要這個來響應，所以隨着屏幕寬度的減小，第一個dd會進入下一行。

現在，我似乎無法讓浮標在正確的位置清除。

任何想法？

這裏是我的代碼：http://jsfiddle.net/WgkZp/

HTML：

<dl> 
<dt class="position">Position Name 1</dt> 
<dd class="side-time clearfix"> 
    <time datetime="2010-08-01" class="start">August 2010</time><span class="end">Present</span> 
</dd> 
<dd class="organization first">Organization Name</dd> 
<dd>Location, USA</dd> 
<dd class="additional"> 
    <ul> 
     <li>Described task 1</li> 
     <li>Described tesk 2</li> 
    </ul> 
</dd> <dt class="position">Position Name 2</dt> 

<dd class="side-time clearfix"> 
    <time datetime="2010-08-01" class="start">August 2010</time><span class="end">Present</span> 
</dd> 
<dd class="organization first">Organization Name</dd> 
<dd>Location, USA</dd> 
<dd class="additional"> 
    <ul> 
     <li>Described task 1</li> 
     <li>Described tesk 2</li> 
    </ul> 
</dd> <dt class="position">Position Name 3</dt> 

<dd class="side-time clearfix"> 
    <time datetime="2010-08-01" class="start">August 2010</time><span class="end">Present</span> 
</dd> 
<dd class="organization first">Organization Name</dd> 
<dd>Location, USA</dd> 
<dd class="additional"> 
    <ul> 
     <li>Described task 1</li> 
     <li>Described tesk 2</li> 
    </ul> 
</dd> 

CSS：

dl { 
    margin: 0 0 0 20px; 
    overflow: hidden; 
} 

dt { 
    margin-top: 10px; 
    float: left; 
} 

dt.first { 
    margin: 0; 
} 

dd { 
    margin: 0; 
    padding: 0; 
} 

dd ul { 
    margin-bottom: 0; 
} 

dd time, dd .end { 
    font-style: italic; 
} 

dd time.start:after { 
    content:'\2013'; 
} 

dd.side-time { 
    float: right; 
} 

.clearfix { 
    *zoom: 1; 
} 

.clearfix:before, 
.clearfix:after { 
    display: table; 
    content: ""; 
    line-height: 0; 
} 

.clearfix:after { 
    clear: both; 
} 

謝謝！

Answer 1

dd { 
    clear:both; 
} 

dt + dd{ 
    clear: none; 
} 

http://jsfiddle.net/WgkZp/1/