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>

私がそれをすることを選んだ方法は、左のそれぞれを浮かせて、それから他の2つの上に座るようにstats UL's絶対に配置することでしたlabels ULUL's

これが、私が現在どのように行っているかを正確に示したJSFiddleです。私は同じ外観を実現するための最も簡単で実用的な方法を見つけようとしていますが、絶対に配置せずに、できればテーブルなしでそれを行います。

4

1 に答える 1

1

2回目の編集

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>

1回目の編集

css を次のように変更します。

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

これがあなたの意図したものかどうかはわかりません。中央は 3 つの 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 に答える