从百分比转换宽度像素

我有一个<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，我无法找到这种差异如何发生。 .td21宽度为1px大于.td11。

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

来源

2012-07-06 Swetha Bindu

它是1 px总是更大？为什么不只是-1的值） – Feanor 2012-07-06 08:09:47

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

来源

2012-07-06 08:10:30 Chin

谢谢！它有助于！我的解决方案： var el = $（'。elem'），temp = el.outerWidth（）; el.css（'width'，temp +'px'）; – 2016-12-05 18:06:07

<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>

来源

2012-07-06 08:13:45

这种情况发生时，你使用百分比+填充。像素是int，所以它将被舍入。

在你的例子中：10％，20％和70％是容器的宽度，比你需要添加填充和边框。

有了这个十进制数就会发生并且需要四舍五入。

例：

你的网页是900px宽。没有填充，边距或边框，您的宽度将为630px（70％），160px（20％），90px（10％）。

但是，当您添加边框+填充百分比必须从900 - （3 tds * 10px填充（左和右）） - （3 tds * 2px边框（左和右））= 864px计算。

使用864px的宽度，您将获得：604,8px（70％），172,8px（20％），86,4px（10％）。

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

来源

2012-07-06 08:14:31 WolvDev

从百分比转换宽度像素

回答

相关问题