繪製比賽托架（基於PHP數據集CSS/HTML）

如果你不熟悉我的意思賽托架，在這裏看到： http://baseballguru.com/bracket1.gif 繪製比賽托架（基於PHP數據集CSS/HTML）

這麼說，我已經建立了數據集，並計算出（賽格（log（$ numPlayers，2）））），我很舒服的找到每輪迴合的玩家數量等。

我現在需要做的是移動我的數組放入支架中。無論是CSS還是桌面，我都可以自己玩這個設計，我只是想知道我應該如何將這個設計（認爲比賽可以有不同數量的輪次）變成視覺效果。

謝謝！

2010-02-02 Matt Dunbar

我的工作產生有/無支架初步循環賽一個PHP/Laravel插件。也許它對你有用，我不知道你使用的是什麼技術。這是github。 https://github.com/xoco70/kendo-tournaments 希望它有幫助！ – 2017-08-24 11:13:55

你可以用表格和適當的rowspan s來排列支架。這是更簡單的方法，但有些人會說在語義上不正確。 Example。

你也可以通過簡單地計算適當的位置並使用絕對定位的div來使它看起來像一個括號一樣，通過CSS'd圖層來實現。請注意，除非您通過javascript移動它，否則此方法將不會變得流暢。 More on this。

最後，您可以使用嵌套列表來完成，如this topic中所述，但看起來相當混亂。

來源

2010-02-02 03:41:28

我用表的第一個例子，但設法在雙方複製它。謝謝。任何建議在更清潔的方式來生成表雖然嗎？ – 2010-02-02 04:06:43

我有一個項目（TournamentsApi），用於跟蹤和渲染錦標賽。你應該看看它。

在我的網站上，我將括號渲染爲SVG並將它們嵌入到HTML中。如果您傾向於使用我的實現，我很樂意分享我用於SVG生成/嵌入的代碼。

當然，我的是用C＃編寫的，所以它可能不適合你使用。但是，源代碼是在MIT許可證下發布的，您可以自由使用我爲您自己的項目創建的數據結構。

來源

2010-02-02 03:45:21

嘿約翰，想知道你是否能夠完成這個項目？希望能夠從您的代碼中瞭解如何通過生成括號來處理我的問題。 – gdubs 2011-11-15 04:46:23

@gdubs，Tournaments API項目或多或少都是完整的。在這裏它正在我們的網站上進行操作：http://lanlordz.net/Events/ViewTournament/8/modern-warfare-2（在輪次列表中向下滾動以將其呈現爲SVG。） – 2011-11-15 20:16:20

嘿約翰，有沒有什麼機會我可以有源代碼？一直在試驗jquery，這是一個真正的痛苦，想知道是否會有一個C＃版本。謝謝！ – gdubs 2011-11-16 15:00:42

-3

如果您需要一個快速而骯髒的解決方案，無需CSS或Java。試試這個：

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

這只是HTML DIV的和行數.png文件（見圖片的7Z文件）。

Grtz，西奧

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

來源

2014-06-15 11:01:21 user3742089

繪製比賽托架（基於PHP數據集CSS/HTML）

回答

相關問題