設計比賽支架 - 不能很好地吻合

Question

我想要設計比賽支架的視覺效果，但它不能很好地插在一起！

的CSS如下：

#tournament-holder{ 
width:708px; 
padding:20px 0 20px 15px; 
float:left; 
} 
.vertical-holder{ 
width:100px; 
padding-right:15px; 
float:left; 
} 
.horizontal-holder1{ 
width:98px; 
height:98px; 
margin-bottom:15px; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder2{ 
width:98px; 
height:98px; 
margin:57.5px 0 72.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder3{ 
width:98px; 
height:98px; 
margin:172.5px 0 187.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder4{ 
width:98px; 
height:98px; 
margin:402.5px 0 417.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder5{ 
width:98px; 
height:98px; 
margin:862.5px 0 877.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.horizontal-holder6{ 
width:98px; 
height:98px; 
margin:1782.5px 0 1797.5px 0; 
border:1px solid #bdbdbd; 
float:left; 
} 
.white-holder{ 
width:98px; 
height:49px; 
background-color:white; 
float:left; 
} 
.yellow-holder{ 
width:98px; 
height:49px; 
background-color:#FFF8DC; 
float:left; 
} 
.player-holder{ 
width:70px; 
height:49px; 
float:left; 
} 
.score-holder{ 
width:28px; 
height:49px; 
float:left; 
} 

現在的HTML：

<div id="tournament-holder"> 
      <div class="vertical-holder"> 
       <?php 
       $q = "SELECT u.username, p.position FROM ".TBL_FOOT_TOUR_PLAYERS." p 
         INNER JOIN ".TBL_USERS." u ON p.userid = u.id 
         WHERE p.tourid = '$tour_id' ORDER BY position"; 
       $result = $database->query($q); 
       $i = 1; 
       while($row=mysql_fetch_assoc($result)){ 
        extract($row); 
        if($i&1){ 
         ?> 
         <div class="horizontal-holder1"> 
          <div class="white-holder"> 
           <div class="player-holder"> 
            <? echo "$username"; ?> 
           </div> 
           <div class="score-holder"> 
            0 
           <div> 
          </div> 
         <?php 
        } 
        else{ 
         ?> 
          <div class="yellow-holder"> 
           <div class="player-holder"> 
            <? echo "$username"; ?> 
           </div> 
           <div class="score-holder"> 
            0 
           <div> 
          </div> 
         </div> 
         <?php 
        } 
        $i++; 
       } 
       ?> 
      </div> 

      <?php 
      //subsequent rounds 

      for($i=1; $i <= $rounds; $i++) 
      { 
       $j = $i + 1; //this is to generate the correct horizontal holder 
       $k = 1; //this is the order of the players - to check if they are odd or even as they come out. 
       $players = $players/2; 
       $q = "SELECT u.username, r.position FROM ".TBL_FOOT_TOUR_ROUNDS." r 
         INNER JOIN ".TBL_USERS." u ON u.id = r.winner 
         WHERE tourid = '$tour_id' && round = '$i' ORDER BY position"; 
       $result = $database->query($q); 
       ?> 
       <div class="vertical-holder"> 
        <?php 
        while($row=mysql_fetch_assoc($result)){ 
        extract($row); 
         if($k&1){ 
          ?> 
          <div class="horizontal-holder<?php echo $j; ?>"> 
           <div class="white-holder"> 
            <div class="player-holder"> 
             <? echo "$username"; ?> 
            </div> 
            <div class="score-holder"> 
             0 
            <div> 
           </div> 
          <?php 
         } 
         else{ 
          ?> 
           <div class="yellow-holder"> 
            <div class="player-holder"> 
             <? echo "$username"; ?> 
            </div> 
            <div class="score-holder"> 
             0 
            <div> 
           </div> 
          </div> 
          <?php 
         } 
         $k++; 
        } 
        ?> 
       </div> 
       <?php 
      } 
      ?> 
     </div> 

下面是什麼支架目前呈現爲鏈接：

Current Bracket problem

顯然，有些東西沒有正確排列。

支架的想法是'錦標賽持有人'將持有整體支架。每輪將有一個'垂直持有人'...每個垂直持有人將包含水平持有人爲每2隊（1夾具）。隨着錦標賽的進一步發展，6個不同的水平持有者可以獲得不同的賽程間距。在每個水平支架中，會有一個黃色或白色支架。兩者都是一樣的，只是不同的背景顏色。其中每一個將是一個球員和得分持有者。

我知道這是一個相當複雜的問題來回答，但可以解答這個問題嗎？ 我有重大問題，只是無法解決問題。

謝謝:)

Answer 1

我已經做了幾個圖形像這些並用自己的WEB運動隊/聯盟管理軟件。爲此，您需要先在內存中準備好結構，而不僅僅是查詢和循環。

$structure = array(); 
$data = mysql_query('SELECT * FROM standings WHERE blablabla'); 
while($datarow = mysql_fetch_assoc($data)){ 

    //Evaluate the round in the first level and the match in second 
    $round = $datarow['round']; 
    $matchid = $datarow['round']; 
    $homeorvisitor = ($datarow['ishome'] ? 'home' : 'visitor'); 
    $structure[$round][$mathid][$homeorvisitor] = $datarow; 

} 

這將創造你，你找到你的比賽和對手各自在輪組合在一起，每場比賽的結構。

然後，使用一個簡單的循環邏輯，您可以創建一個包含每一輪的表格，並在每個表格中創建一個顯示匹配的div。我喜歡使用表格，但如果你足夠好用CSS，請使用CSS進行處理。我嘗試在這裏使用div，它應該用簡單的CSS輸出。

foreach($structure as $roundkey => $round){ 

    ?><div id="round<?php echo $roundkey; ?>" class="round"><?php 

     foreach($round as $matchid => $match){ 

      ?><div id="match<?php echo $matchid; ?>" class="match round<?php echo $roundkey; ?>"><?php 

       //Output your match box content here 

      ?></div><?php 

     } 

    ?></div><?php 

} 

這應該輸出你

<div id="round1" class="round"> 
    <div id="match1" class="match round1"> 
    </div> 
    <div id="match2" class="match round1"> 
    </div> 
    <div id="match3" class="match round1"> 
    </div> 
    <div id="match4" class="match round1"> 
    </div> 
</div> 
<div id="round2" class="round"> 
    <div id="match5" class="match round2"> 
    </div> 
    <div id="match6" class="match round2"> 
    </div> 
</div> 
<div id="round3" class="round"> 
    <div id="match7" class="match round3"> 
    </div> 
</div> 

我提出的CSS是要發一定的寬度，浮動並排，並根據有關的往返＃每場比賽將採取特定的高度和寬度用它。所以，這樣你就可以做出一個比賽中ROUND1比round2匹配更小的（以兩倍的高度居中。

是否所有的意義？