2011-02-02 22 views
8
<html> 
<head> 
<style> 
    * { margin:0; border:0; padding:0; } 
    div { height:500px; } 
    #container { width:1000px; background-color:#000; } 
    #column-one { float:left; padding:10px; width:500px; background-color:#234; } 
    #column-two { float:left; padding:10px; width:500px; background-color:#345; } 
</style> 
</head> 
<body> 
<div id="container"> 
    <div id="column-one"> 
    </div> 
    <div id="column-two"> 
    </div> 
</div> 
</body> 
</html> 

counterintuitive.Dolgu, div genişliği/yüksekliğine ekler? Gerçekten

+0

err bir soru var mı? Ve hangi tarayıcı (IE bunun için kötü şöhretli bir kutu modeline sahiptir). – Sean

+0

Tüm tarayıcılarda eleman genişliği/yüksekliğine dolgu, kenar boşluğu ve kenarlık ekleme – jennyfofenny

+4

Bu iyi bilinen bir özelliktir. Sorunuz nedir? – Leigh

cevap

23

dolgu ve sınırları bir kutu için belirlenen width içinde sayılmaz content-box model devletler. Böylece width'a eklenirler.

Modern tarayıcılar (varsayılan yukarıdaki davranışı tetikleme, tabii, content-box etmektedir) içeriği, dolgu ve sınırların toplam genişliği temsil etmek width neden CSS3 en box-sizing: border-box destekler.

+0

Bu eski ve ölümüne dövülmüş bir konu biliyorum, ancak * Neden içerik kutusu modeli dolgu içermez? Özellikle div'larımın büyüklüğünü kontrol edebilmem ve yine de içinde dolgu var ise, hassas düzenler oluşturmak çok daha kolay olacaktır. Ayrıca, IE10 veya Chrome'da "kutu boyutlandırma" özelliği ile hiç şansınız yok. Üzgünüm, hüsrana uğrarsam. Bu senin hatan değil. –

+0

@Mike U: Bunun nedeni, içeriğin tanım alanına göre dolgu alanında görünememesidir. Firefox, spesifikasyonda belirtilen, risk altında olan ve başka hiçbir yerde uygulanmayan deneysel bir “dolgu kutusu” değerine sahiptir. IE10 veya Chrome üzerinde çalışmak için kutu boyutlandırmasını alamıyorsanız, başka bir şey olmalı, çünkü bildiğim kadarıyla, her ikisini de desteklemiyor. – BoltClock

+0

Anladım * kutu modeli nasıl çalışır? Çoğunlukla sadece merak ediyor * neden * bu şekilde çalışıyor. Çok kasıtsız ve mantıksız görünüyor. Önceki yorumumdan bu yana çalışmak için kutu model özelliğini aldım. Sadece belirli sınıflara uygulayamayacağınız görünüyor. İşe almamın tek yolu onu "*" ile uygulamaktı. Klasik yol sadece mantıksız görünüyor. Ekranın% 40'ında bir şey olmasını ve 4px'lik bir dolgu olmasını istesem, klasik modelle düzgün bir düzen yapmak imkansız. sadece bir keder, sanırım. En azından şimdi nasıl geçeceğimi biliyorum. –

1

genişlik içerik doldurabilir genişliği, senin sınırında tarafından sınırlandırılmış kutunun genişliğidir.

0

Belki de yanlış anladım ama width: 100% yerine div için width: auto kullanarak sorununuzu çözebilirsiniz düşünüyorum; PS: Yazının eski olduğunu biliyorum ama belki hala yararlı olabilir ...