dt（浮动左边）和第一个dd（浮动右边）在同一行上

我正在使用定义列表来定义简历的各个部分。dt（浮动左边）和第一个dd（浮动右边）在同一行上

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

谢谢！

来源

2013-04-08 Will M

从'dt'的顶部卸下的余量。这是推动到第二线。将'clear：both'添加到'dd'位置以将其保留在浮线下方的新线上。 – js1568 2013-04-08 20:58:04

dd { 
    clear:both; 
} 

dt + dd{ 
    clear: none; 
}

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

来源

2013-04-08 20:59:56

这似乎工作，除了我希望时间/日期左对齐时，它被移动到一个新的行，因为屏幕宽度减少。没有媒体查询的任何方式来做到这一点？ – 2013-04-08 21:42:42

没有我能想到没有JavaScript。 – 2013-04-08 22:57:49

dt（浮动左边）和第一个dd（浮动右边）在同一行上

回答

相关问题