html - css - 获取 div 来填充杯子支架的父级

Question

我的 CSS 有问题。我不能让我的“圆形”课程的 div 孩子来填补他们的父母。

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>

提前致谢

Answer 1

我想我明白您在寻找什么：典型的支架设置。

但是，您似乎已经做到了！

看看我的 jfiddle 截图：

你使用的是什么浏览器？你觉得它怎么样？（我正在使用 Chrome）。