Question

我正试图进入季后赛＃34;在wordpress网站页面上。括号将由数据库和PHP代码提供，每周用适当的对手和赢家和输家填充它们。

所以我基本上试图在页面上以某种方式绘制括号。我在这里工作：http://www.jerseybasketballassociation.com/1a-test-logo/

这不是完美的，只是在努力;那里我只有前两周......

如果你不知道我的意思＆＃34;季后赛支架＆＃34;你可以在这里看到一个例子： http://printyourbrackets.com/8seeded.html

基本上我所拥有的就是好的;但是如果我能在某两个星期之间能够设置一些线路以便你可以看到第1和第8队，那么它会得到很大改善。他们有一些线条显示胜利者进入第二周（标记为第1组）

有没有人对如何使用CSS / html生成这些行有任何想法？

我还会粘贴HTML和CSS代码，将其放在页面上：

<style>
#round1_boxa {border: 1px solid gray; padding: 2px; margin-bottom: 27px;}
#round1_boxb {border: 1px solid gray; padding: 2px; margin-bottom: 54px;}

#round2_boxa {border: 1px solid gray; padding: 2px; margin-top: 27px; }
#round2_boxb {border: 1px solid gray; padding: 2px; margin-top: 108px;}
#round2_boxc {border: 1px solid gray; padding: 2px; margin-top: 108px;}
#round2_boxd {border: 1px solid gray; padding: 2px; margin-top: 108px;}


#round1_cont {width: 150px; float: left;}
#round2_cont {width: 150px; float: left; margin-left: 20px;}
#game_box {margin-bottom: 30px;}
</style>
<div id="round1_cont">

<div id="game_box">
<div id="round1_boxa">
Team 1
</div>
<div id="round1_boxb">
Team 8
</div>
</div>

<div id="game_box">
<div id="round1_boxa">
Team 4
</div>
<div id="round1_boxb">
Team 5
</div>
</div>

<div id="game_box">
<div id="round1_boxa">
Team 3
</div>
<div id="round1_boxb">
Team 6
</div>
</div>
<div id="game_box">
<div id="round1_boxa">
Team 2
</div>
<div id="round1_boxb">
Team 7
</div>
</div>

</div>

<div id="round2_cont">

<div id="round2_boxa">
Team 1
</div>
<div id="round2_boxb">
Team 4
</div>
<div id="round2_boxc">
Team 2
</div>
<div id="round2_boxd">
Team 3
</div>

</div>

所以我试图看看是否有人对如何绘制那些从一个盒子到另一个盒子的线条以描绘前进的团队有任何想法。非常感谢...

Answer 1

您需要重新考虑任务并更改标记。

<div class="c1">
    <div class="team">1</div>
    <div class="team">2</div>
    <div class="team">3</div>
    <div class="team">4</div>
</div>
<div class="c2">
    <div class="block first">semi1</div>
    <div class="block">semi2</div>
</div>
<div class="c3">
    <div class="block">final</div>
</div>
<div class="c4">
    <div class="block">winner</div>
</div>

CSS：

* {box-sizing: border-box}

.team {
    text-align: right;
    line-height: 40px
}
.c1, .c2, .c3, .c4 {
    float: left;
    width: 100px
}
.c1 .team {
    width: 100px;
    height: 40px
}
.c2 .block, .c3 .block {
    margin-top: 40px;
    height: 40px;
    width: 100px;
    border-top: solid 2px #000;
    border-right: solid 2px #000;
    border-bottom: solid 2px #000;
    text-align: right;
    line-height: 40px;
}
.c2 .block.first {
    margin-top: 20px;
}
.c3 .block {
    height: 80px;
    line-height: 80px;
}

.c4 .block {
    margin-top: 60px;
    text-align: right;
    border-bottom: solid 2px #000;
}

这里有完整的例子 http://jsfiddle.net/fncxsezn/

css协助绘制季后赛席位

1 个答案: