将宽度从百分比转换为像素

时间:2012-07-06 07:59:01

标签: javascript jquery html

我在<div>

中有一张桌子
<div id="fixeddiv">
    <table id="fixedtable">
        <tr class="firstrow">
            <td class="td11"></td>
            <td class="td12"></td>
            <td class="td13"></td>
        </tr>

        <tr class="secondrow">
            <td class="td21" style="width:10%"></td>
            <td class="td22" style="width:20%"></td> 
            <td class="td23" style="width:70%"></td>
        </tr>
    </table>
</div>

CSS:

#fixeddiv
{
    overflow:auto;
    margin:0px;
    padding:0px;
    position: relative;
    text-align:left;
    width: 48%;
}

#fixedtable
{
    background-color: White;
    border-spacing:0px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-family: Calibri !important;
    color: Black;
    font-size: 14px;
}

.firstrow
{
    position: absolute;
    margin: 0px;
    left: 0;
    top: 0;
    background: url(../Content/Images/header.jpg) repeat-x center top;
    color: White;
    font-weight: bold;
    text-align: center;

}
#fixedtable tr td
{
    padding: 5px !important;
    border: 1px solid #FFFFFF;
    text-align: center;
}

我正在使用td21计算$('.td21').width()的宽度,并将宽度指定为td11,如$('td11').width($('.td21').width())

问题是应用的宽度不同,它们会因1px而异,我无法找到这种1px差异是如何发生的。 .td21宽度1px大于.td11

任何人都可以帮我找到解决方案吗?

3 个答案:

答案 0 :(得分:14)

<div id="div-1" style="width: 1000px;">
    <div id="div-2" style="width: 10%;"></div>
</div>

<script language="javascript">                
    var percents = parseInt(document.getElementById("div-2").style.width);
    var parentWidth = parseInt(document.getElementById("div-1").style.width);
    var pixels = parentWidth*(percents/100);
    alert(pixels); // will print "100"
</script>

答案 1 :(得分:2)

尝试使用.outerWidth()代替.width()

答案 2 :(得分:0)

使用百分比+填充时会发生这种情况。 Pixel是int,因此它将被舍入。

在您的示例中:10%,20%和70%是容器的宽度,而不是您需要添加填充和边框。

使用此十进制数将出现,而不是需要舍入。

示例:

您的页面宽度为900像素。如果没有填充,边距或边框,则宽度为630px(70%),160px(20%),90px(10%)。

但是当你添加边框+填充时,百分比必须从900计算 - (3 tds * 10px填充(左和右)) - (3 tds * 2px边框(左和右))= 864px。

宽度为864像素,你会得到:604,8px(70%),172,8px(20%),86,4px(10%)。

这就是发生1px差异的地方。