2011-03-03 10 views

cevap

42

, dolgu kutusu boyutunda bulunmaktadır. Detaylar için bakınız here.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>padding example</title> 
     <style type="text/css"> 
     .seventy { 
      display: block; 
      float: left; 
      width: 70%; 
      background-color: red; 
     } 
     .thirty { 
      display: block; 
      float: left; 
      width: 30%; 
      padding: 25px; 
      box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      background-color: green; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="seventy">Stuff</div> 
     <div class="thirty">More Stuff</div> 
    </body> 
</html> 
+2

Yine de, kutu boyutlandırması için destek biraz kabataslaktır. Genişliklerden birinden küçük bir yüzdeyi almayı ve dolguya eklemeyi düşünün. Yani 2 genişliğiniz + dolgu =% 100. EDIT ~ Zeta Twos çözümü, daha iyi bir çözüm olacak 25px'lik bir boşluğu garanti edecektir. – sweetroll

+0

@ codelark -webkit ve -moz'a ihtiyacım var mı? – DBS

8

Öğenin içinde aynı türde başka bir öğe (sanırım bir div olabilir mi?) Oluşturabilir ve 25px'lik bir dolgu/kenar boşluğuna sahip olmasını ayarlıyorum. Örneğin

: Eğer border-box modeli kullandığınızda

<div id="wrapper"> 
<div id="width30"> 
</div> 
<div id="width70"> 
    <div id="padding25"> 
    Acctual content here. 
    </div> 
    </div> 
</div> 
</div> 
+0

Bu, insanların daha fazla hesaba katması gereken akıllıca bir çözümdür. Taslak css hack yok, potansiyel olarak desteklenmeyen tarayıcı yok ve temiz bir kapsayıcı içerik kalıbı izliyor. Over-mühendis için çok kolay olduğu için bazı KISS CSS (CISS?) Görmek için sevindim. – Nol