2011-09-26 31 views
9

Đây là một lời trêu ghẹo não cho người dũng cảm. Tôi đã ở đó trong nhiều ngày và không thể đi kèm với giải pháp.Làm cách nào để biểu diễn cây nhị phân có bảng (html)?

Tôi muốn đi ra với một cái gì đó như thế này:

enter image description here

Sử dụng html, css và php chỉ.

Tôi đã đến gần, nhưng không hoàn toàn là những gì tôi mong đợi. Here is the code in PHPhere is the output.

<table border="0"> 
<thead> 
    <tr> 
     <th>Cientoveintiochavos</th> 
     <th>Seseintaicuatravos</th> 
     <th>Treintaidosavos</th> 
     <th>Dieciseisavos</th> 
     <th>Octavos</th> 
     <th>Cuartos</th> 
     <th>Semifinales</th> 
     <th>Final</th> 
    </tr> 
</thead> 
<tbody> 
<?php for($i=0;$i<256;$i++): ?> 
    <tr> 
     <?php for($n=0,$c=2;$n<8;$n++,$c*=2): ?> 
      <?php 
      /* 
      if(false){//$i == 0) { 
       $rwspn = $c/2+1; 
       $iter = 0; 
      } else { 
       $rwspn = $c; 
       $iter = $c;//-$c/2+1; 
      } 
      */ 
      $class = ($i%($c*2))?'par':'impar winner'; 
      if($i%$c==0):?> 
       <td rowspan="<?=$c;?>" class="<?=$class;?>"><span><?php echo genRandomString();?></span></td> 
      <?php endif; ?> 
     <?php endfor; ?> 
    </tr> 
<?php endfor; ?> 
</tbody> 
</table> 

Nếu ai đó biết cách đại diện cho cây nhị phân hoặc chương trình chuẩn hoặc đưa ra mã thông minh hơn, vui lòng cho tôi biết!

Trả lời

3

Tôi đã thực hiện một cái gì đó như thế này, sử dụng diva kinda như @HugoDelsing. Con đường tôi xử lý các dòng là để phân chia mỗi cặp thành 4 divs theo chiều dọc xếp chồng lên nhau:

  1. các cầu thủ đầu tiên (border-bottom)
  2. Một spacer giữa 1st và máy nghe nhạc 2nd (border-right)
  3. người chơi thứ hai (border-bottom và border-right)
  4. Một spacer trước khi cặp tiếp theo (không biên giới)

Mỗi được 1/4 chiều cao của cặp *, và tổng chiều cao của một cặp được tăng gấp đôi khi bạn di chuyển sang phải. Nếu bạn không có sức mạnh của hai, hãy lấp đầy các vị trí bằng trình giữ chỗ để đẩy mọi thứ xuống đúng số tiền.

* Đường viền dưới cùng sẽ làm giảm chiều cao bằng 1, vì vậy hãy tính đến điều đó khi tạo kiểu cho các hàng của bạn.

Ghi chú khác
Các div spacer thể không cần thiết, nhưng đối với tôi họ dễ dàng xử lý các khoảng cách và nhận được các cột khác nhau để xếp hàng một cách chính xác.

Tôi đã sử dụng các kiểu nội tuyến được điền bởi PHP cho chiều cao, vì vậy tôi không có giới hạn độ sâu tùy ý hoặc các phép tính được mã hóa cứng thành CSS.

Here's an example.

EDIT
OK, đây là teh codez:

<style type="text/css"> 
    .round{ 
     float:left; 
     width:200px; 
    } 
    .firstTeam, .secondTeam{ 
     border-bottom:1px solid #ccc; 
     position:relative; 
    } 
    .firstSpacer, .secondTeam{ 
     border-right:1px solid #ccc; 
    } 
    .team{ 
     position:absolute; 
     bottom: 4px; 
     left: 8px; 
    } 
</style> 
<div class="round"> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:29px;"><div class="team">Team One</div></div> 
     <div class="firstSpacer" style="height:30px;">&nbsp;</div> 
     <div class="secondTeam" style="height:29px;"><div class="team">Team Two</div></div> 
     <div class="secondSpacer" style="height:30px;">&nbsp;</div> 
    </div> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:29px;"><div class="team">Team Three</div></div> 
     <div class="firstSpacer" style="height:30px;">&nbsp;</div> 
     <div class="secondTeam" style="height:29px;"><div class="team">Team Four</div></div> 
     <div class="secondSpacer" style="height:30px;">&nbsp;</div> 
    </div> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:29px;"><div class="team">Team Five</div></div> 
     <div class="firstSpacer" style="height:30px;">&nbsp;</div> 
     <div class="secondTeam" style="height:29px;"><div class="team">Team Six</div></div> 
     <div class="secondSpacer" style="height:30px;">&nbsp;</div> 
    </div> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:29px;"><div class="team">Team Seven</div></div> 
     <div class="firstSpacer" style="height:30px;">&nbsp;</div> 
     <div class="secondTeam" style="height:29px;"><div class="team">Team Eight</div></div> 
     <div class="secondSpacer" style="height:30px;">&nbsp;</div> 
    </div> 
</div> 
<div class="round"> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:59px;"><div class="team">Team One</div></div> 
     <div class="firstSpacer" style="height:60px;">&nbsp;</div> 
     <div class="secondTeam" style="height:59px;"><div class="team">Team Three</div></div> 
     <div class="secondSpacer" style="height:60px;">&nbsp;</div> 
    </div> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:59px;"><div class="team">Team Five</div></div> 
     <div class="firstSpacer" style="height:60px;">&nbsp;</div> 
     <div class="secondTeam" style="height:59px;"><div class="team">Team Eight</div></div> 
     <div class="secondSpacer" style="height:60px;">&nbsp;</div> 
    </div> 
</div> 
<div class="round"> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:119px;">&nbsp;</div> 
     <div class="firstSpacer" style="height:120px;">&nbsp;</div> 
     <div class="secondTeam" style="height:119px;">&nbsp;</div> 
     <div class="secondSpacer" style="height:120px;">&nbsp;</div> 
    </div> 
</div> 
<div class="round"> 
    <div class="matchup"> 
     <div class="firstTeam" style="height:239px;">&nbsp;</div> 
    </div> 
</div> 
+0

bạn có thể dán ví dụ về mã hoặc jsfiddle để hiển thị dễ dàng hơn không? trông chỉ là những gì tôi đang tìm kiếm, nhờ –

+0

@NaoiseGolden: mã ví dụ được thêm vào. – grossvogel

0

Tôi không sử dụng bảng nhưng div.

  • tạo div chứa cột có vị trí tương đối/tuyệt đối với chiều rộng cố định (ví dụ: 200px) cho mỗi cột.
  • Mỗi vùng chứa cột có div bên trong có chiều cao và chiều cao gấp đôi vùng chứa cột trước đó
  • tạo hình ảnh đường thẳng đứng màu đen dài (dài hơn một nửa kích thước của chiều cao lớn nhất của div bên trong trong bất kỳ cột nào. dòng với một đường ngang rộng 200px bên trái (để xoay một L với 180 độ).Để lại khoảng một nửa chiều cao văn bản của không gian trống trên đường ngang trong hình ảnh, do đó, dòng sẽ được theo văn bản. hình ảnh này làm hình nền cho div bên trong của mỗi vùng chứa cột và định vị nó ở giữa trái, lặp lại = none;

Một số mã mẫu (không có hình ảnh)

<style type="text/css"> 
div.col { position:absolute;border:1px solid #f00;width:200px;top:0px; } 
div.col1 { left:0px; } 
div.col1 div { height:20px; line-height:20px; } 
div.col2 { left:200px; } 
div.col2 div { height:40px; line-height:40px; } 
div.col3 { left:400px; } 
div.col3 div { height:80px; line-height:80px; } 
div.col4 { left:600px; } 
div.col4 div { height:160px; line-height:160px; } 
div.col5 { left:800px; } 
div.col5 div { height:320px; line-height:320px; } 
</style> 


<div class='col1 col'> 
    <div>player1</div> 
    <div>player2</div> 
    <div>player3</div> 
    <div>player4</div> 
    <div>player5</div> 
    <div>player6</div> 
    <div>player7</div> 
    <div>player8</div> 
    <div>player9</div> 
    <div>player10</div> 
    <div>player11</div> 
    <div>player12</div> 
    <div>player13</div> 
    <div>player14</div> 
    <div>player15</div> 
    <div>player16</div> 
</div> 
<div class='col2 col'> 
    <div>player1</div> 
    <div>player3</div> 
    <div>player5</div> 
    <div>player7</div> 
    <div>player9</div> 
    <div>player11</div> 
    <div>player13</div> 
    <div>player15</div> 
</div> 
<div class='col3 col'> 
    <div>player1</div> 
    <div>player5</div> 
    <div>player9</div> 
    <div>player13</div> 
</div> 
<div class='col4 col'> 
    <div>player1</div> 
    <div>player9</div> 
</div> 
<div class='col5 col'> 
    <div>player1</div> 
</div> 
+0

cách tiếp cận thú vị. Tôi đã thực hiện một fiddle [ở đây] (http://jsfiddle.net/naoise/ez5N2/) nhưng vẫn không thể xem làm thế nào để quản lý các dòng như trong hình ảnh. –

0

Có vẻ như bạn sắp hoàn tất. Công việc tốt đẹp! Tôi nghĩ rằng căn giữa bạn muốn là trong CSS

td { 
    vertical-align: middle; 
} 

Tôi không nghĩ rằng bạn có thể nhận các đường để hoạt động khi sử dụng đường viền. Thay vào đó, bạn có thể thử hình nền cho chúng.

+0

đúng vậy, các dòng sẽ không hoạt động nên đó không phải là giải pháp (♫ niau niau niau, may mắn lần sau! ♫) Thực ra có nhiều thứ hơn là đáp ứng mắt. Tôi có một vài giấy tờ với các biểu diễn và công thức, làm một phép tính gần đúng, nhưng một cái gì đó bị thiếu và không thể tiếp tục với nó vào lúc này. Có lẽ có một xấp xỉ đơn giản hơn. –

Các vấn đề liên quan