0

だから私は水平のタイムラインを作ろうとしています。年を定義用語dt、記述を定義記述ddとして、定義リストdlを作成するのが最も論理的だと思いました。

準備ができたら、次のようになります。

タイムラインのデザイン

これはこれまでの私の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 に答える