<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.child {
background-color: red;
width:33.3%;
height:200px;
float:left;
}
.wraper {
width:80%;
height:600px;
margin:auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="wraper">
<div class="child">
<p>some text</p>
</div>
<div class="child">
<p>some text</p>
</div>
<div class="child">
<p>some text</p>
</div>
</div>
</body>
</html>
我尝试设置一个小布局,我想知道一些奇怪的事情:我必须将孩子的宽度设置为33.3 3 %,否则会有一些间距右边。这是正确的方法吗?类似的东西:如果我想在5px的孩子周围设置边框怎么办?我真的必须尝试适合哪个百分比数字吗?或者是否有另一种方法来设置孩子的全宽,包括边框,边距和填充到固定的百分比数字?我想我需要一些关于这些东西如何在html中工作的解释。
答案 0 :(得分:0)
在CSS中设置全宽的方法是使用box-sizing
:
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
有关详细信息:http://www.paulirish.com/2012/box-sizing-border-box-ftw/