0

我正在寻找实现此处显示的布局的最有效方法：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我目前正在做的事情。我只是想用最简单最实用的方法来实现相同的外观，但不要绝对定位，最好不要桌子。

4

1 回答 1

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

虽然你应该重新考虑一张桌子。这种东西就是他们的目的。

于 2013-01-24T04:38:52.027 回答