0

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

您对如何使用 div 而不是 table 进行缩放有更好的建议吗？

<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

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

您只需将嵌套 div 的宽度属性调整为适当的百分比。

于 2012-08-21T17:41:07.367 回答
0

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

于 2012-08-21T17:32:11.677 回答
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 回答