【发布时间】：2014-02-24 22:45:26
【问题描述】：
我正在尝试创建一个动态的锦标赛网站，它可以缩放到任何大小，但使用尽可能少的代码。
第一轮（游戏）：我已经完成了第一轮比赛，它可以灵活适应任何规模，无论我用它做什么都会很好看。
第二轮：这是问题开始的地方，因为我对连接所有游戏的线路的解决方案。这些线条由 div 类 .line-top 和 .line-bottom 模拟。但是，由于第 2 轮的游戏较少，而游戏之间的空间较大，因此无法将相同的行代码应用于第 2 轮的每一组游戏。第一个工作正常，如示例中所示，除了连接它们的线路，这也是一个问题。如果我在第 2 轮中添加另一组游戏，则代码会中断，因为需要比第一个游戏上方的空间更大的空间。它需要与第 2 轮中第 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;
}
【问题讨论】：
-
您是否查看过之前有关此问题的 StackOverflow 问题，例如 this？
-
+1 尝试使用
HTML，但您考虑过SVG吗？ -
我尝试为中心线添加一个新的 div 以水平附加到框。这会导致我无法修复的浮动和清除问题。
-
jsfiddle.net/UZs4s/2 包含添加了类 line-center 的新版本。我不能让它出现在盒子之前。所有这些清除和浮动都让我感到困惑。
-
您能给我一些反馈吗？