Question

我正在尝试创建的是一个动态的锦标赛网站，可以缩放到任何大小，但使用尽可能少的代码。

第一轮（比赛）：我进行了第一轮比赛，并且它适用于任何尺寸，无论我用它做什么，它都会很好看。

Secound round：这是问题开始的地方，因为我解决了连接所有游戏的线路问题。线条由div类进行模拟.line-top＆amp; .line区段底部。但是，由于第2轮游戏较少，游戏之间的空间较大，因此相同的行代码无法应用于第2轮中的每组游戏。第一轮工作正常，如示例中所示，除了连接它们的线，这也是一个问题。如果我在第2轮中添加另一组游戏，则代码会中断，因为需要比第一个游戏上方的空间更大的空间。它需要与游戏1和游戏之间相同的空间。第2轮第2场比赛。检查例子，你会明白我的意思。

对于我真正的问题：如何根据锦标赛中的玩家数量创建一个娴熟的动态网站？主要是，我该如何处理这些线？我需要在每个方框之前加上一条线，以及在第3场比赛之前修复所需的空间，以及任何其他添加的游戏。当我添加第3轮和第4轮等时会出现同样的问题。我猜的主要问题是连接盒子的线条，水平线条，而不是垂直线条。现在盒子只是放在上面。非常方框的左边应该有一条水平线。

我对这个问题的处理方法是否已经错了？我的线路是否有更好的解决方案以及我如何在游戏上方和下方创建空间？

网站可在此处找到：http://jsfiddle.net/UZs4s/

HTML

    <div class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Tournament</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="round-1">
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-top"></div>
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-bottom"></div>
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-top"></div>
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-bottom"></div>
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-top"></div>
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-bottom"></div>
        </div>

        <div class="round-2">
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-top"></div>
            <div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-bottom"></div>
<div class="game">
                <div class="contender-1">
                x
                </div>
                <div class="contender-2">
                x
                </div>
            </div>
            <div class="line-top"></div>
        </div>
    </div>

CSS

.contender-1,
.contender-2 {
    font-family: Arial, sans-serif;
    font-size: 12px;
    width: 120px;
    border: 1px solid #000;
    padding-left: 2px;
    background-color: #f1f1f1;
}

.contender-1 {
    border-bottom: 0px;
}

.game {
    margin-bottom: 16px;
    float: left;
    clear: both;
}

.round-1 .line-top {
    float: left;
    height: 35px;
    width: 10px;
    border-right: 1px solid #000;
    margin-top: 18px;
    border-top: 1px solid #000;
}

.line-bottom {
    float: left;
    height: 19px;
    width: 10px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

.round-1 {
    float: left;
}

.round-2 {
    float: left;
    margin-top: 26px;
}

.round-2 .line-top {
    float: left;
    height: 85px;
    width: 10px;
    border-right: 1px solid #000;
    margin-top: 18px;
    border-top: 1px solid #000;
}

Answer 1

我建议使用relative positioning，absolute positioning和z-index将括号字段放在括号上方。这样，字段可以沿着连接线左右滑动。我还要说，当在智能手机上以纵向模式观看时，支架应该叠在一起，因为必须捏合并放大以查看整个支架。

Answer 2

http://jsfiddle.net/coma/AwrZq/22/

http://caniuse.com/#feat=flexbox

div.tournament {
    display: flex;
    flex-direction: row;
}

div.tournament > div {
    flex: 1;
}

div.tournament > div > div {
    position: relative;
}

div.tournament > div + div {
    flex: 1;
    display: flex;
    flex-flow: column;
    padding-left: 20px;
}

div.tournament > div:first-child > div + div {
    padding-top: 10px;
}

div.tournament > div + div > div {
    flex: 1;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
}

div.tournament > div > div + div:after {
    content: "";
    position: absolute;
    bottom: 50%;
    right: -10px;
    width: 1px;
    height: 100%;
    background-color: #333;
}

div.tournament > div:first-child > div + div:after {
    height: 62px;
    bottom: 25px;
}

div.tournament > div > div > ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #333;
    width: 100%;
}

div.tournament > div > div > ul:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -11px;
    right: -10px;
    height: 1px;
    background-color: #333;
}

div.tournament > div:first-child > div > ul:after {
    left: 0;
    right: -9px;
}

div.tournament > div:last-child > div > ul:after {
    right: 0;
}

div.tournament > div > div > ul > li {
    font-size: 15px;
    line-height: 1em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 5px;
    background-color: #ccc;
}

div.tournament > div > div > ul > li:before {
    content: "X";
}

比赛括号 - 线和＆amp;空间

2 个答案: