Question

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

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

我还需要这个响应，所以当屏幕宽度减小时，第一个dd会转到下一行。

现在，我似乎无法让浮标在正确的位置清除。

有什么想法吗？

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/

dt（向左浮动）和第一个dd（向右浮动）在同一条线上

1 个答案: