css - dt(向左浮动)和第一个 dd(向右浮动)在同一行

Question

我正在使用定义列表来定义简历的各个部分。

我想让每个 dt 和它的第一个 dd 显示在同一行上。 dt 应该在左边，dd 在右边。我希望每个 dt 的剩余 dds 显示在 dt 下方。

我还需要它来响应，以便随着屏幕宽度的减小，第一个 dd 转到下一行。

现在，我似乎无法在正确的时间点清除 float 。

有什么想法吗？

这是我的代码: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/