% 70 genişliğe sahip bir elemanım var ve% 30 genişliğe sahip bir elemanın yanında kayar, ancak 25px doldurma eklediğimde, elemanı genişletir ve formatı koparır. İçeriğin kenarı, sadece onu daha büyük hale getirmekten farklı olarak mı?Dolgu maddesini elemanın daha büyük yapmasını engelliyor musunuz?
, 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>
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
@ codelark -webkit ve -moz'a ihtiyacım var mı? – DBS
Öğ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>
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
Kodunuzun bir kısmını görelim –