0

CSS に問題があります。「ラウンド」クラスの div-children を取得して親を埋めることができません。

http://jsfiddle.net/ubJxJ/10/

さらに明確にするために、ブラケット設定のためにdivを揃えたいと思います。Fx "Match #17" のセンターは、"Match #1" および "Match #2" のセンターと同じです。

CSS:

#cup { display:table; }
#headlinecontainer, #roundcontainer { display:table-row; }
#headlinecontainer div {
    display:table-cell;
    text-align:center;
}
#roundcontainer .round {
    display:table-cell;
    vertical-align:middle;
    background-color:#F00;
    overflow:hidden;
}
#roundcontainer .round div.match { background-color:#0F0; }

HTML:

<div id="cup">
    <div id="headlinecontainer">
        <div>Round of 32</div>
        <div>Round of 16</div>
        <div>Quarter</div>
        <div>Semi</div>
        <div>Final</div>
    </div>
    <div id="roundcontainer">
        <div class="round ro32">
            <div class="match">Match #1</div>
            <div class="match">Match #2</div>
            ...
            <div class="match">Match #15</div>
            <div class="match">Match #16</div>
        </div>
        <div class="round ro16">
            <div class="match">Match #17</div>
            ...
            <div class="match">Match #24</div>
        </div>
        <div class="round quarter">
            <div class="match">Match #25</div>
            <div class="match">Match #26</div>
            <div class="match">Match #27</div>
            <div class="match">Match #28</div>
        </div>
        <div class="round semi">
            <div class="match">Match #29</div>
            <div class="match">Match #30</div>
        </div>
        <div class="round">
            <div class="match">Match #31</div>
        </div>
    </div>
</div>

前もって感謝します

4

1 に答える 1

0

あなたが探しているもの、つまり典型的なブラケットのセットアップを理解していると思います。

しかし、あなたはすでにそれを達成しているようです！

あなたのjfiddleの私のスクリーンショットを見てください：

ここに画像の説明を入力

どのブラウザを使用していますか? それはあなたにとってどのように見えますか？（私はChromeを使用しています）。

于 2013-02-09T23:46:41.710 に答える