更改当前使用无序列表和绝对定位的 3 列布局

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>

我选择的方法是将每个stats UL'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>

第一次编辑

将 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/

原始发布：

摆弄宽度和东西，并将 #content 居中，这应该为您完成。

<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%;
}

虽然你应该重新考虑一个表。这种事情就是他们被造的目的。