html - 比赛支架-线条和空间

我试图创建的是一个动态锦标赛网站，可以缩放到任何大小，但使用尽可能少的代码。
第一轮（游戏）：我有第一轮和运行，它是灵活的任何大小，它会好看，无论我用它做什么。
第二回合：这是问题的开始，因为我对连接所有游戏的线路的解决方案。这些行由div类.line top和.line bottom模拟。但是，由于第二轮的游戏较少，游戏之间的空间较大，所以不能对第二轮的每套游戏都使用同一行代码。正如您在示例中所看到的，第一种方法可以很好地工作，除了连接它们的线，这也是一个问题。如果我在第二轮中添加另一组游戏，代码就会中断，因为需要比第一个游戏上方的空间更大的空间。它需要的空间与第二轮第1场和第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;
}

最佳答案

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";
}

关于html - 比赛支架-线条和空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22000757/