php - 绘制锦标赛括号（基于 PHP 数据集的 CSS/HTML）

Question

如果您不熟悉锦标赛括号的含义，请参见此处： http ://baseballguru.com/bracket1.gif

也就是说，我已经建立了数据集并计算了回合数 (ceil(log($numPlayers,2)))，并且我很容易找到每回合的玩家人数等。

我现在需要做的是将每一轮的匹配数组移到一个括号中。无论是 CSS 还是桌面，我都可以自己玩设计，我只是想知道我应该如何将这个（考虑到锦标赛可以有可变数量的回合）构建成视觉效果。

谢谢！

score 3 · Accepted Answer

我有一个项目 ( TournamentsApi )，用于跟踪和渲染比赛。你应该看看它。

在我的网站上，我将括号呈现为 SVG 并将它们嵌入到 HTML 中。如果您倾向于使用我的实现，我很乐意分享我用于 SVG 生成/嵌入的代码。

当然，我的是用 C# 编写的，所以它可能不适合你使用。但是，源代码是在 MIT 许可下发布的，您可以自由使用我为您自己的项目创建的数据结构

score 1 · Accepted Answer

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

您也可以通过简单地计算适当的位置并使用绝对定位的 div 使其看起来像一个括号来使用 CSS 图层。请注意，除非您通过 javascript 移动它，否则这种方法不会流畅。更多关于这个。

最后，您可以使用嵌套列表来完成此操作，如本主题中所述，但这看起来很混乱。

score -3 · Accepted Answer

If you are up for a quick and dirty solution with No CSS or java needed. try this:

https://dl.dropboxusercontent.com/u/43939704/TournamentBrackets.7z

It's just HTML DIV's and a few .png files for the lines (see the 7Z file for pics).

Grtz, Theo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<meta http-equiv="refresh" content="1" >
<head>
  <title>Boom16 - dubbele afvalling </title>
</head>
<body>

<!-- Div info -->

    <div id="DivInfo"  style="position:absolute; top:10px; left:930px; width:300px; height:60px; "><FONT SIZE="10" COLOR="000000">DIVISIE 1</FONT></div>

<!-- Scheiding -->

    <div id="Scheiding"  style="position:absolute; top:604px; left:0px; width:926px; height:2x; border:2px solid #000; "></div>
    <div id="ST1"        style="position:absolute; top:585px; left:10px; width:200px; height:60px; "><FONT SIZE="3" COLOR="000000">Normale races<br>Herkansings races</FONT></div>


<!-- Lijnen -->

    <div id="H"    style="position:absolute; top:606px; left:1132px;width:24px; height:2x;     border:2px solid #000; "></div>
    <div id="HL2"  style="position:absolute; top:315px; left:900px; width:130px; height:260px; background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL3"  style="position:absolute; top:635px; left:900px; width:130px; height:260px; background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL4"  style="position:absolute; top:145px; left:670px; width:130px; height:110px; background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL5"  style="position:absolute; top:785px; left:670px; width:130px; height:110px; background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL6"  style="position:absolute; top:315px; left:670px; width:130px; height:110px; background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL7"  style="position:absolute; top:955px; left:670px; width:130px; height:110px; background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL8"  style="position:absolute; top:75px;  left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL9"  style="position:absolute; top:715px; left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL10" style="position:absolute; top:175px; left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL11" style="position:absolute; top:815px; left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL12" style="position:absolute; top:355px; left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL13" style="position:absolute; top:995px; left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL14" style="position:absolute; top:455px; left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL15" style="position:absolute; top:1095px;left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL16" style="position:absolute; top:30px;  left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL17" style="position:absolute; top:670px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL18" style="position:absolute; top:105px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL19" style="position:absolute; top:745px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL20" style="position:absolute; top:170px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL21" style="position:absolute; top:810px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL22" style="position:absolute; top:245px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL23" style="position:absolute; top:885px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL24" style="position:absolute; top:310px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL25" style="position:absolute; top:950px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL26" style="position:absolute; top:385px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL27" style="position:absolute; top:1025px;left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL28" style="position:absolute; top:1090px;left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL28" style="position:absolute; top:450px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL30" style="position:absolute; top:525px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL31" style="position:absolute; top:1165px;left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>

<!-- Blokken -->

    <div id="H0"  style="position:absolute; top:575px; left:1160px;width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H0  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H1"  style="position:absolute; top:575px; left:930px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H1  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H2"  style="position:absolute; top:255px; left:700px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H2  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H3"  style="position:absolute; top:895px; left:700px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H3  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H4"  style="position:absolute; top:115px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H4  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H5"  style="position:absolute; top:755px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H5  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H6"  style="position:absolute; top:395px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H6  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H7"  style="position:absolute; top:1035px;left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H7  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H8"  style="position:absolute; top:45px ; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H8  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H9"  style="position:absolute; top:685px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H9  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H10" style="position:absolute; top:185px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H10 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H11" style="position:absolute; top:825px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H11 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H12" style="position:absolute; top:325px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H12 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H13" style="position:absolute; top:965px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H13 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H14" style="position:absolute; top:465px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H14 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H15" style="position:absolute; top:1105px;left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H15 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H16" style="position:absolute; top:10px;  left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H16 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H17" style="position:absolute; top:650px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H17 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H18" style="position:absolute; top:80px;  left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H18 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H19" style="position:absolute; top:720px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H19 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H20" style="position:absolute; top:150px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H20 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H21" style="position:absolute; top:790px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H21 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H22" style="position:absolute; top:220px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H22 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H23" style="position:absolute; top:860px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H23 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H24" style="position:absolute; top:290px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H24 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H25" style="position:absolute; top:930px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H25 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H26" style="position:absolute; top:360px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H26 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H27" style="position:absolute; top:1000px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H27 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H28" style="position:absolute; top:1070px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H28 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H28" style="position:absolute; top:430px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H28 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H30" style="position:absolute; top:500px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H30 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H31" style="position:absolute; top:1140px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H31 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>


</body>
</html>

php - 绘制锦标赛括号（基于 PHP 数据集的 CSS/HTML）

3 回答 3

Related

Reference