Question

这是勇敢的脑筋急转弯。我已经好几天了，只是无法提供解决方案。

我想提出这样的事情：

enter image description here

仅使用html，CSS和PHP。

我靠近了，但并不完全符合我的预期。 Here is the code in PHP和here 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>

如果有人知道如何表示二叉树或树形图或提出更智能的代码，请告诉我们！

Answer 1

我做过类似的事情，使用类似@HugoDelsing的div。我处理这些线的方法是将每对分成4个垂直堆叠的div：

第一个玩家（border-bottom）
第1和第2名球员之间的间隔（右边界）
第二个玩家（边框底部和边框右侧）
下一对之前的间隔（无边框）

每个都获得对的高度的1/4 *，当你向右移动时，一对的总高度加倍。如果你不具备2的权力，请用占位符填充插槽，以便将所有内容压缩到正确的数量。

*底部边框会将高度偏离1，因此在对样式进行样式设计时请考虑到这一点。

其他笔记
间隔div可能不是必需的，但对我来说，它们很容易处理间距并使不同的列正确排列。

我使用PHP填充的内联样式作为高度，因此我没有任意深度限制或硬编码到CSS中的计算。

Here's an example.

修改
好的，这是代码：

Answer 2

我不会使用表格而是div。

为每个col创建一个具有相对/绝对位置且具有固定宽度（例如：200px）的列容器div。
每个列容器都有内部div，其高度和lineheight是前一个列容器的两倍
创建一个长黑色垂直线图像（长度至少为任何列中内部div最大高度的一半。开始使用向左宽度为200px的水平线（因此旋转L为180度）。将大约自由空间文本高度的一半留在图像中的水平线上方，因此该行将位于文本下方。
将此图像设置为每个列容器的内部div的背景，并将其放置在左中心; repeat = none;

一些示例代码（没有图像）

<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>

Answer 3

看起来你差不多了。干得好！我认为你想要的中心对齐是CSS

td {
    vertical-align: middle;
}

我认为你不能使用边框来使用线条。您可以尝试为它们尝试背景图像。

如何用表格（html）表示二叉树？

3 个答案: