0

所以我正在尝试制作一个水平时间线。我认为创建一个定义列表 dl 以年份作为定义术语 dt 并将描述作为定义描述 dd 是最合乎逻辑的事情。

准备好后，它应该如下所示：

时间线设计

到目前为止，这是我的 html 代码：

<dl class="timeline">
<dt>1665</dt>
<dd>The first chamber of commerce is established in Bruges. Over the following years and centuries, other chambers of commerce are established on the territory of present-day Belgium. They are private organisations, founded by local traders.</dd>                       
<dt>1791</dt>
<dd>Under French rule, the chambers of commerce and the corporations are dissolved.</dd>
<dt>1802</dt>
<dd>Napoleon reestablished the chambers of commerce.</dd>
</dl>

现在我想将所有定义彼此相邻浮动，而不必创建不同的 dl 或类似的东西。换句话说，我尝试将 dt 与他所属的 dd 一起设计。

有谁知道这个问题的解决方案？

4

1 回答 1

0 

.line {
  float:left;
  width:100px;
  border-left:1px solid;
  padding-left:20px;
  margin-right:30px;
}
.blue {
  border-left:1px solid blue;
  color:blue;
}
.yellow {
  border-left:1px solid yellow;
  color:yellow;
}
.green {
  border-left:1px solid green;
  color:green;
}
.red {
  border-left:1px solid red;
  color:red;
}
<div class="line blue"><h1>1990</h1><p>Text</p></div>
<div class="line yellow"><h1>1990</h1><p>Text</p></div>
<div class="line green"><h1>1990</h1><p>Text</p></div>
<div class="line red"><h1>1990</h1><p>Text</p></div>

于 2016-01-10T12:34:46.430 回答