0

これが私の試みです。各列の幅が同じではありませんが、どうすれば修正できますか？

テーブルの代わりにdivを使用してスケールを実行する方法についてより良い提案がありますか？

<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=10 border-style=outset>
    <TR>
    <TD BGCOLOR="#ffffff">
    <TD BGCOLOR="#ffcccc">
    <TD BGCOLOR="#ff8888">
    <TD BGCOLOR="#ff4444">
    <TD BGCOLOR="#ff0000">
    </TR>
    <TR>
    <TD id="a">20</TD>
    <TD id="b">40</TD>
    <TD id="c">60</TD>
    <TD id="d">80</TD>
    <TD id="e">100</td>
    </TR>
</table>
4

3 に答える 3

1

このフィドルは、スケーリング領域を作成する1つの方法を示します：http：//jsfiddle.net/aL2ME/

ネストされたdivのwidthプロパティを適切なパーセンテージに調整するだけです。

于 2012-08-21T17:41:07.367 に答える
0

質問は少し曖昧で、スケールの意味がわかりませんが、@ Keithのコメントから外れると、そのような色のグラデーションを作成できます。ここで実際の例を参照してください（jsfiddle）

HTML:

<div id="scale">
    <div>20</div>
    <div>40</div>
    <div>60</div>
    <div>80</div>
    <div>100</div>
</div>​

CSS:

#scale div {
    float: left;
    width: 50px;
    padding: 10px;
    border: 1px #333 solid;
}

JavaScript (jQuery):

$(document).ready(function() {

    var scales = $('#scale').children('div');
    var length = scales.length;
    console.log(scales);
    // loop through all the scales
    scales.each(function(idx, scale) {
        var red = 255;
        var green = 255 - (idx / length) * 255;
        var blue = 255 - (idx / length) * 255;
        var rgb = 'rgb(' + red + ',' + green + ',' + blue + ')'
        $(scale).css('background-color', rgb);
    });

});​

サイトのニーズに合わせて JavaScript と CSS の色を調整します。現在、質問にあるように赤になっています。

編集:これがそれほど変更されない場合、または本質的に動的でない場合は、静的ソリューションを使用する方がよい場合があります。ここ (jsfiddle)で、CSS を使用し、各 "パーセント" の色をハードコーディングしたことを確認できます。

于 2012-08-21T18:09:00.997 に答える
0

実際の値ではなく、<div>位置とサイズが定義された を使用する必要があります。%sこれにより、ウィンドウ サイズの変更に合わせてページをスケーリングできます。

于 2012-08-21T17:32:11.677 に答える