錦標賽括號 - 線和空間

Question

我想創建的是一個動態的錦標賽網站，可以縮放到任何尺寸，但儘可能使用盡可能少的代碼。

第一輪（遊戲）：我已經第一輪起步並且運行了，它對任何規模都很靈活，無論我做什麼，它都會很好看。

四分衛：這是問題出現的地方，因爲我的解決方案是連接所有遊戲的線路。這些線是由div類.line-top & .line-bottom模擬的。然而，由於第二輪比賽較少，而且比賽之間的空間較大，所以第二輪比賽中的每一組比賽都不能使用相同的代碼。第一個很好，就像你在例子中看到的那樣，除了連接它們的線外，這也是一個問題。如果我在第二輪添加另一組遊戲，則代碼會中斷，因爲需要比第一個遊戲空間更大的空間。它需要和第2輪第2場比賽1 &相同的空間。檢查例子，你會明白我的意思。

我真正的問題：如何創建一個動態網站，將取決於參加比賽的球員數量？主要是，我該如何處理這些線？我在每個盒子前都需要一條線，以及在第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

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

Answer 2

我會建議使用relative positioning，absolute positioning和z-index定位支架領域ABO ve括號。這樣，字段可以沿着連接線左右滑動。我還會說，在智能手機上以縱向模式觀看時，支架應該堆疊在彼此的頂部，因爲必須捏合並放大以查看整個支架。