Question

这是我的尝试。每列的宽度不一样，我该如何解决？

对于如何使用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>

Answer 1

这个小提琴将向您展示创建缩放区域的一种方法：http://jsfiddle.net/aL2ME/

您只需将嵌套div的width属性调整为适当的百分比即可。

Answer 2

您应该使用<div>使用%s而不是实际值定义其位置和大小。这将允许您的页面随着窗口大小的变化而缩放。

Answer 3

这个问题有点模糊＆amp;我不确定你的音阶是什么意思，但是对于@ Keith的评论你可以做一个像这样的颜色渐变。请参阅工作示例here (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中的颜色＆amp;适合您网站需求的CSS - 截至目前，您的问题已经是红色了。

编辑：如果不会发生这么大的改变或者本质上不是动态的，那么使用静态解决方案可能会更好。您可以查看here (jsfiddle)我在哪里使用CSS并在每个“百分比”的颜色中进行硬编码。

将缩放添加到HTML页面

3 个答案: