CSS: Breite in Prozent und Rahmen

Question

Ich habe die Breite der Container in Prozent definiert. Ich möchte einen Rahmen hinzufügen (3px auf der rechten Seite einer Breite), da die Containerbreite in% ist, während die Rahmenbreite in px ist, wie kann ich die Breite des Containers anpassen?

<div class="wrap"> 
    <div class="left">...</div> 
    <div class="right">...</div> 
</div> 

.wrap{ 
    width:100%; 
} 

.left{ 
    width:30%; 
} 

.right{ 
    width:70%; 
} 

Ich möchte 3px Grenze auf der rechten Seite von .left hinzufügen. Zum Beispiel:

.left{ 
    width:30%; 
    border:3px solid #000; 
} 

Da ich Breite in% definiert habe, was ist der beste Weg, um die Breite des .left neu zu justieren. Ich kann die Breite grob auf 29% verringern, aber ich will es genau machen.

Answer 1

Verwenden Sie die box-sizing: border-box Eigenschaft. Es ändert das Verhalten des Boxmodells, um Padding und Rahmen als Teil der Gesamtbreite des Elements zu behandeln (nicht jedoch die Ränder). Dies bedeutet, dass die festgelegte Breite oder Höhe des Elements Dimensionen enthält, die für das Padding und den Rahmen festgelegt wurden. In Ihrem Fall würde das die Breite des Elements bedeuten und die Breite des Rahmens würde 30% des verfügbaren Platzes einnehmen.

Unterstützung für sie nicht perfekt ist, wird jedoch Anbieter Präfixe die meisten, wenn nicht alle modernen Browser fangen:

.left { 
    width: 30%; 
    border: 3px solid #000; 

    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Weitere Informationen finden Sie auf der MDN und Quirksmode finden.

According to Quirksmode, die 3 Anbieter Präfixe oben (-moz-, -webkit- und -ms-) verwenden, können Sie Unterstützung für alle Browser bekommen, auch IE8.

Answer 2

Das ist ein bisschen schwierig ist, aber auf einem Weg, diese Post Check-out um es zu bekommen:

• Percentage Plus Pixel Sizing (und Example)
• Box Sizing on CSS-Tricks (und Example)

Die box-sizing Eigenschaft kann auch für Sie interessant sein, überprüfen Sie diese:

• How do I add 1px border to a div whose width is a percentage?

Answer 3

Der einfachste browserübergreifende Weg ist, den Rahmen NICHT auf die äußeren divs zu setzen und stattdessen auf ein NEW div innerhalb .left zu setzen. Einfach und funktioniert gut.

Answer 4

Gerade px zu vw wie

ändern

border-width: 10px; 

zu

border-width: 10vw; 

Seine tun was Prozentsatz tun ....