CSS: larghezza in percentuale e bordi

Question

Ho definito le larghezze dei contenitori in percentuale. Mi piacerebbe aggiungere un bordo (3px sul lato destro di una larghezza), poiché la larghezza del contenitore è in% mentre la larghezza del bordo è in px, come posso regolare la larghezza del contenitore?

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

.wrap{ 
    width:100%; 
} 

.left{ 
    width:30%; 
} 

.right{ 
    width:70%; 
} 

Mi piacerebbe aggiungere il bordo 3px sul lato destro di .left. Ad esempio:

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

Poiché ho definito larghezza nella%, qual è il modo migliore per ri-regolare la larghezza del .left. Posso ridurre drasticamente la larghezza al 29%, ma voglio fare precisamente.

Answer 1

Utilizzare la proprietà box-sizing: border-box. Modifica il comportamento del modello box per trattare padding e border come parte della larghezza totale dell'elemento (non margini, comunque). Ciò significa che la larghezza o altezza impostata dell'elemento include le dimensioni impostate per il riempimento e il bordo. Nel tuo caso, ciò significherebbe la larghezza dell'elemento e la sua larghezza del bordo consumerebbe il 30% dello spazio disponibile.

supporto per esso non è perfetto, però prefissi vendor rileva la maggior parte se non tutti i browser moderni:

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

Maggiori informazioni si possono trovare sul MDN e Quirksmode.

According to Quirksmode, utilizzando i prefissi 3 vendor di cui sopra (-moz-, -webkit- e -ms-), si ottiene il supporto per tutti i browser, anche IE8.

Answer 2

Questo è un po 'complicato, ma il check-out questo post su un modo per aggirare l'ostacolo:

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

La proprietà box-sizing può anche di tuo interesse, guarda questo:

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

Answer 3

Il modo più semplice per browser incrociati è NON impostare il bordo sulle div esterne, e invece impostarlo su un NUOVO div all'interno di .left. Semplice e funziona bene.

Answer 4

Basta cambiare px a vw come

border-width: 10px; 

a

border-width: 10vw; 

Il suo fare che cosa fare .... percentuale