改變目前使用無序列表和絕對定位的三欄佈局

Question

我在尋找最有效的方式來實現這裏顯示的佈局：http://cl.ly/image/0n0a293Z0O2m

目前的代碼看起來是這樣的。

<ul class="stats left"> 
    <li>168/299</li> 
    <li>10</li> 
    <li>56.2%</li> 
    <li>11</li> 
    <li>71</li> 
</ul> 

<ul class="stats right"> 
    <li>308/515</li> 
    <li>21</li> 
    <li>59.8%</li> 
    <li>15</li> 
    <li>80</li> 
</ul> 

<ul class="labels"> 
    <li>Completions/Attempts</li> 
    <li>Touchdowns</li> 
    <li>Completion %</li> 
    <li>Interceptions</li> 
    <li>Longest Pass</li> 
</ul> 

我選擇做它是浮動每個statsUL's的方式離開，然後以絕對定位labels UL坐的其他兩個UL's

這裏頂部的JSFiddle究竟如何我現在正在做。我只是試圖獲得最簡單最實用的方法來實現相同的外觀，但是沒有絕對定位，最好沒有定位。

Answer 1

第二個編輯

http://jsfiddle.net/K3p4E/38/

CSS

#container { 
    width:90%; 
    text-align: center; 
} 
ul.stats { 
    background: #ececec; 
    width: 33%; 
    float:left; 
} 
ul.stats > li, ul.labels > li { 
    height: 30px; 
    border-bottom: 1px solid #ddd; 
    line-height: 30px; 
} 
ul.labels > li { 
    font-weight: bold; 
} 
ul.labels { 
    float:left; 
    width: 34%; 
} 
#container h1 { 
    width:100%; 
    background:#000; 
    color:#0FF; 
    line-height: 30px; 
    clear:both; 
} 

HTML

<div id="container"> 
    <h1>Passing</h1> 
    <ul class="stats"> 
     <li>168/299</li> 
     <li>10</li> 
     <li>56.2%</li> 
     <li>11</li> 
     <li>71</li> 
    </ul> 
    <ul class="labels"> 
     <li>Completions/Attempts</li> 
     <li>Touchdowns</li> 
     <li>Completion %</li> 
     <li>Interceptions</li> 
     <li>Longest Pass</li> 
    </ul> 
    <ul class="stats"> 
     <li>308/515</li> 
     <li>21</li> 
     <li>59.8%</li> 
     <li>15</li> 
     <li>80</li> 
    </ul> 
    <h1>Rushing</h1> 
    <ul class="stats"> 
     <li>168/299</li> 
     <li>10</li> 
     <li>56.2%</li> 
     <li>11</li> 
     <li>71</li> 
    </ul> 
    <ul class="labels"> 
     <li>Completions/Attempts</li> 
     <li>Touchdowns</li> 
     <li>Completion %</li> 
     <li>Interceptions</li> 
     <li>Longest Pass</li> 
    </ul> 
    <ul class="stats"> 
     <li>308/515</li> 
     <li>21</li> 
     <li>59.8%</li> 
     <li>15</li> 
     <li>80</li> 
    </ul> 
</div> 

1ST編輯

更改CSS來此：

ul.labels > li { 
font-weight: bold; 
width:300%; 
} 
ul.labels { 
position:relative; 
left:-30%; 
float:left; 
text-align: center; 
width: 30%; 
} 

不知道這是不是你的意思。該中心橫跨所有三個ul，但是，這與您的原始發佈非常相似，具有一些優點，特別是流體佈局。 http://jsfiddle.net/K3p4E/29/

原始張貼：

撥弄寬度和事物和中心＃內容，這應該爲你做它。

<div id="container"> 
<ul class="stats"> 
    <li>168/299</li> 
    <li>10</li> 
    <li>56.2%</li> 
    <li>11</li> 
    <li>71</li> 
</ul> 
<ul class="labels"> 
    <li>Completions/Attempts</li> 
    <li>Touchdowns</li> 
    <li>Completion %</li> 
    <li>Interceptions</li> 
    <li>Longest Pass</li> 
</ul> 
<ul class="stats"> 
    <li>308/515</li> 
    <li>21</li> 
    <li>59.8%</li> 
    <li>15</li> 
    <li>80</li> 
</ul> 
</div> 

CSS

#container { 
    width:90%; 
} 
ul.stats { 
    background: #ececec; 
    width: 30%; 
    text-align: center; 
    float:left; 
} 
ul.stats > li, ul.labels > li { 
    height: 30px; 
    border-bottom: 1px solid #ddd; 
    line-height: 30px; 
} 
ul.labels > li { 
    font-weight: bold; 
} 
ul.labels { 
    float:left; 
    text-align: center; 
    width: 30%; 
} 

雖然你應該重新考慮的表。這種事情就是他們所做的。