php - 设计比赛支架 - 不能很好地组合在一起

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

很明显，有些地方没有正确排列。

括号的想法是“tournament-holder”将包含整个括号。每轮都会有一个“垂直持有人”......每个垂直持有人将包含每 2 支球队(1 个固定装置)的水平持有人。随着比赛越来越远，6 个不同的水平支架适用于固定装置之间的不同间距。在每个水平支架中，都会有一个黄色或白色的支架。两者是一样的，只是背景颜色不同。每一个里面都有一个球员和得分持有者。

我知道这是一个非常复杂的问题，但可以回答这个问题吗？我遇到了重大问题，无法解决。

谢谢 :)

Answer 1

我已经完成了几个这样的图形，并且曾经拥有一个网络运动队/联赛管理软件。为此，您需要首先在内存中准备您的结构，而不仅仅是查询和循环。

$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 是使圆具有一定的宽度，并排 float ，并且每个匹配项都将采用特定的高度和宽度，具体取决于与其关联的圆#。这样一来，您就可以使第 1 轮中的一场火柴比第 2 轮中的一场火柴小(取两倍高度使其居中。

这一切都有意义吗？