Het omzetten van de breedte van het percentage van de pixels

Heb ik een tabel in een <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;
}

Ik ben het berekenen van de breedte van td21 met $('.td21').width() en het toewijzen van de breedte te td11 zoals $('td11').width($('.td21').width()).

Het probleem is dat de breedte van toepassing zijn niet hetzelfde, ze variëren door 1px en ik kon niet vinden hoe dit 1px verschil optreden. De .td21 breedte is 1px groter dan .td11.

Kan iemand mij helpen om een oplossing te vinden?

  • is het altijd meer op 1 px? Waarom niet gewoon van -1 tot de waarde)

 

3 Replies
  1. 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>
  2. 2

    Probeer .outerWidth() in plaats van .width()

    • Dank u! Het helpt! Mijn oplossing: var el = $(‘.elem’), = temp el.outerWidth(); el.css(‘breedte’, temp + ‘px’);
  3. 0

    Dit gebeurt wanneer u gebruik procent + vulling. Pixel is int en zo zal het worden afgerond.

    In uw voorbeeld: 10%, 20% en 70% van de breedte van de container en dan moet u de padding en border.

    Met deze decimale getallen zal optreden en dan moet worden afgerond.

    VOORBEELD:

    Uw pagina is 900px breedte. Zonder padding, margin of grens die je met een breedte van 630px (70%), 160px (20%), 90px (10%).

    Maar als u de grens + vulling de percentages moeten berekend worden uit de 900 – (3 tds * 10px padding (links en rechts)) – (3 tds * 2px grens(links en rechts)) = 864px.

    Met 864px breedte krijgt u: 604,8 px (70%), 172,8 px (20%), 86,4 px (10%).

    En dit is waar de 1px verschil occures.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *