html - 改变当前使用无序列表和绝对定位的 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 向左浮动，然后将 labels UL 绝对定位到 sit在其他两个 UL

之上

这是一个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%;
}

虽然你应该重新考虑一张 table 。这种东西就是它们的用途。