html - 如何使描述列表中的不同定义彼此相邻 float ？

Question

所以我想做一个水平时间轴。我认为创建一个定义列表 dl 是最合乎逻辑的事情，其中​​年份作为定义术语 dt，描述作为定义描述 dd。

准备好后，它应该是这样的:

Timeline design

到目前为止，这是我的 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 一起设置样式。

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

Answer 1

.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>