css - 獲取div以填充杯托架的父項

我的CSS有問題。我不能讓我的「圓」類的div-children填充他們的父母。css - 獲取div以填充杯托架的父項

爲了更加明確：我想要的div對齊的托架安裝。 F.X. 「第17場比賽」的中鋒與「第1場比賽」和第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>

在此先感謝

來源

2013-02-09 CoBolt

我想我明白你在找什麼：一個典型的支架安裝。

但是，看來你已經實現了！

看看我的jfiddle的截圖：

enter image description here

是什麼瀏覽器您使用？它如何尋找你？（我正在使用Chrome）。

來源

2013-02-09 23:46:41

它不像我想要的:)我想比賽＃17的中心在比賽＃1和比賽＃2之間。我想要比賽＃17，＃18，＃19之間的空間...像這樣：http://jsfiddle.net/ejQbb/但沒有所有的div.spacer的 – CoBolt 2013-02-09 23:52:20

好吧，讓我爲你工作！ – 2013-02-10 00:05:18

http://jsfiddle.net/persianturtle/qZaps/所以我有這個到目前爲止，但一個問題，我有問題搞清楚如何對齊文本垂直居中。我嘗試將無序列表顯示爲表格列，並將列表顯示爲表格單元格，但由於某些原因，這不起作用。我會弄明白的，但是我想告訴你我迄今爲止所做的工作，希望我們都能夠解決問題並找出解決方案。我還在工作！讓我知道你在做什麼。 – 2013-02-10 01:35:16

css - 獲取div以填充杯托架的父項

回答

相關問題