vom Prozentsatz an Pixeln

Question

Ich habe in einem <div> eine Tabelle Converting Breite:

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

Ich Berechnen der Breite des td21 mit $('.td21').width() und Zuweisen der Breite td11 wie $('td11').width($('.td21').width()).

Das Problem ist, dass die Breiten, die angewandt werden, nicht gleich sind, sie unterscheiden sich durch 1px und ich konnte nicht finden, wie dieser Unterschied auftritt. Die Breite ist 1px größer als .td11.

Kann mir bitte jemand helfen, die Lösung zu finden?

Answer 1

Versuchen Sie es mit .outerWidth() statt .width()

Answer 2

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

Answer 3

Dies geschieht, wenn Sie Prozent + padding verwenden. Pixel ist int und so wird es gerundet.

In Ihrem Beispiel: 10%, 20% und 70% ist die Breite des Containers und dann müssen Sie die Füllung und den Rand hinzufügen.

Mit dieser Dezimalzahlen auftreten und müssen dann gerundet werden.

Beispiel:

Ihre Seite ist 900px Breite. Ohne Polster, Rand oder Rand haben Sie Breiten von 630px (70%), 160px (20%), 90px (10%).

Aber wenn Sie den Rand + Polsterung hinzufügen, müssen die Prozente von 900 berechnet werden - (3 tds * 10px Polsterung (links und rechts)) - (3 tds * 2px Grenze (links und rechts)) = 864px.

Mit 864px Breite erhalten Sie: 604,8px (70%), 172,8px (20%), 86,4px (10%).

Und das ist, wo der 1px Unterschied auftritt.