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

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

我希望每个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;
}

谢谢！

最佳答案

dd {
    clear:both;
}

dt + dd{
    clear: none;
}

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

关于css - dt(向左 float )和第一个dd(向右 float )在同一行上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15888745/