如何创建一个杯子树

Question

我不知道如何用html和javascript创建一个杯子树。 我有一些专栏

Round 1 | Round 2 | Round 3 | Final

再次为比赛添加三个新列

teamA
result
teamB


teamA
result
teamB


teamA
result
teamB

在下一列中匹配较少。 我想创建程序化树，但我不知道如何处理macthes之间的不同空间，因为在每一轮它们都更大。我不知道如何计算。

你们中有人知道怎么做吗？

这是我到现在为止所做的事情

<div class="yui3-u-1-4 tourneyMatchColumn">
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
</div>

Answer 1

我认为在这种情况下使用<table>非常好。这里有一些基本的标记和格式，可以帮助您入门。

演示：jsfiddle.net/Marcel/Qz3cq

Answer 2

请参阅Drawing a tournament bracket