CSS: yüzdesi kapların yüzdesi genişliği ve Sınırlar

Question

tanımlanan I ettik genişlikleri. Sınır genişliği px ise kapsayıcı genişlik% iken, bir sınır (bir genişliğin sağ tarafında 3px) eklemek istiyorum, kabın genişliğini nasıl ayarlayabilirim?

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

.wrap{ 
    width:100%; 
} 

.left{ 
    width:30%; 
} 

.right{ 
    width:70%; 
} 

.pft. Sağ tarafına 3px kenarlık eklemek istiyorum. Örneğin:

I% genişliği tanımladık

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

, .left genişliğini yeniden ayarlamak için en iyi yolu budur. Kabaca kabaca% 29 oranında düşürebilirim, ama kesinlikle yapmak istiyorum. biraz zor ama bir şekilde bu yazı check out

Answer 1

kullanın box-sizing: border-box özelliği. Kutu modelinin, elemanın toplam genişliğinin bir parçası olarak dolgu ve kenarlığı işlemek için davranışını modifiye eder (kenar boşlukları değil). Bu eleman grubu genişlik veya yükseklik dolgu ve kenarlığın ayarlanmış boyutları içerir anlamına gelir. Sizin durumunuzda, bu elemanın genişliği anlamına gelecektir ve sınırın genişliği mevcut alanın% 30'unu tüketecektir.

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

fazla bilgi MDN ve Quirksmode bulunabilir: bunun için

Destek mükemmel değildir, ancak satıcı önekleri tümü olmasa bile çoğu modern tarayıcılar yakalayacak. (-moz-, -webkit- ve -ms-) Yukarıdaki 3 satıcı önekleri kullanılarak

According to Quirksmode

, Tüm tarayıcılarda bile IE8 için destek alın.

Answer 2

etrafında almak için:

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

box-sizing mülkiyet edebilir Ayrıca size ilgi, bu check out:

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

Answer 3

en kolay çapraz tarayıcı yolu dış bölümlerde; sınır ayarlayın ve yerine .left içinde YENİ div üzerinde ayarlayın DEĞİL etmektir. Basit ve iyi çalışıyor. Yüzde yapmak neyin

Answer 4

Sadece