1

実際の例

そこで、Chris Coyier の CSS3 box-sizing grid setupを使用しています。そして、グリッドを完璧にセットアップしました。各モジュールの内部にはdiv、背景を CSS3 RGBA 線形グラデーションに設定する があります。すべてが順調で、問題なく表示されますが、 を使用しているためpadding、最後の要素の背景がモジュールの幅と padding. それをさらに説明する可能性のある例を確認すると、最後のモジュールが問題のあるモジュールです。正しい幅を形成する最後の要素をリセットしようとしましたpadding-right: 30pxが、コンテナーの幅を 100% 超えていません。

4

1 に答える 1

2

この回答には、問題とニーズの進化を反映するための複数の編集があることに注意してください

各要素が使用可能な幅の 25% であることをブラウザーに伝え、次に各要素の右側から 30px を差し引いてそれらを離すように指示しています。次に、「最後のものを除いて、右から何も差し引かないでください」と言っているので、最初の3つは実際には25％-30pxであり、最後のものだけが本当に25％です。

これを解決する方法は、最終的なレイアウトで何が必要かによって異なりますが、最後のアイテムの右パディングが 0px であるというビットを取り除き、すべての要素の左パディングが 15px になるように設定し、 15px の右パディング。

編集1

ニーズを明確にした後、この回答は OP により適しています: http://jsfiddle.net/Az3eH/

HTML:

<div class="grid">
  <div class="col-1-4">
    <div class="tan-trans">
      1/4
    </div>
  </div>
  <div class="col-1-4">
    <div class="tan-trans">
      1/4
    </div>
  </div>
  <div class="col-1-4">
    <div class="tan-trans">
      1/4
    </div>
  </div>
  <div class="col-1-4">
    <div class="tan-trans">
      1/4
    </div>
  </div>
</div>​

CSS:

.tan-trans {
    background: #282816;
    background: -moz-linear-gradient(top, rgba(40,40,38,1) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,40,38,1)), color-stop(100%,rgba(0,0,0,0)));
    background: -webkit-linear-gradient(top, rgba(40,40,38,1) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(top, rgba(40,40,38,1) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(top, rgba(40,40,38,1) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(40,40,38,1) 0%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282826', endColorstr='#00000000',GradientType=0);
    border-radius: 10px;
    padding: 20px;
}
.grid:after {
    content: "";
    display: table;
    clear: both;
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

[class*='col-']{float:left;padding-left:1%;padding-right:1%; padding-top: 30px; }

.col-1-1 { width: 100%; }
.col-1-3 { width: 33.33%; }
.col-2-3 { width: 66.66%; }
.col-1-2 { width: 50%; }
.col-1-4 { width: 25.5%; }
.col-1-8 { width: 12.5%; }
.col-3-8 { width: 37.5%; }
.col-5-8 { width: 62.5%; }
.col-7-8 { width: 87.5%; }
.col-1-16 { width: 6.25%; }
.col-3-16 { width: 18.75%; }
.col-5-16 { width: 31.25%; }
.col-7-16 { width: 43.75%; }
.col-9-16 { width: 56.25%; }
.col-11-16 { width: 68.75%; }
.col-13-16 { width: 81.25%; }
.col-15-16 { width: 93.75%; }
[class*='col-']:first-of-type {padding-left:0; padding-right: 1%; width: 24.5%}
[class*='col-']:last-of-type { padding-left: 1%; padding-right:0;width: 24.5%}​

編集2 OPにさらに問い合わせると、純粋なHTML/ CSS ソリューション。これを念頭に置いて、彼は960.gs に従って固定レイアウトを使用することで、各パーセントの幅を決定するためのより良いオプションが可能になると私は考えています。すなわち: 100% == 960px で、すべてのサブディビジョンはその固定幅の割合になります。

于 2012-09-04T23:48:34.857 に答える