绘制锦标赛支架（基于PHP数据集的CSS / HTML） [英] Drawing a tournament bracket (CSS/HTML based on PHP Dataset)

问题描述

如果你不熟悉我的意思是比赛括号，请参阅这里：
http： //baseballguru.com/bracket1.gif

If you're not familiar with what I mean by tournament bracket, see here: http://baseballguru.com/bracket1.gif

也就是说，我已经构建了数据集并确定了回合数（ceil（log（$ numPlayers ，2）））和我很舒服地发现每轮的球员数量等。

That said, I have built the dataset and figured out the number of rounds (ceil(log($numPlayers,2))) and I am comfortable finding the number of players in each round, etc.

我现在需要做的是移动我的每一轮比赛的数组插入支架。无论是CSS还是桌面，我都可以自己玩设计，我只是想知道我应该如何建设这个（考虑到锦标赛可以有一个可变数目的回合）成一些视觉效果。

What I need to do now is move my array of matches for each round into a bracket. Be it CSS, or tabled, I can play with the design myself, I'm just wondering how I should go about building this (consider the tournament can have a variable number of rounds) into something visual.

谢谢！

推荐答案

您可以使用表格并设置适当的 rowspan s以排列括号。这是更容易的方法，但有些人会说语法不正确。 示例。

You could go with tables and set appropriate rowspans to line up the bracket. This is the easier way, but some will say not semantically correct. Example.

你也可以通过计算适当的位置和使用绝对定位的div来使它看起来像一个括号，通过CSS'd图层。注意，这种方法不会流动，除非你通过javascript移动它。 详情。

You could also do it with CSS'd layers by simply calculating appropriate positions and using absolutely positioned divs to make it look like a bracket. Note that this approach won't be fluid unless you move it around by javascript. More on this.

最后，您可以使用嵌套列表，如 this主题，但看起来很乱。

Finally, you could do it with nested lists, as described in this topic, but that looks quite messy.

这篇关于绘制锦标赛支架（基于PHP数据集的CSS / HTML）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！