0 
<!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 中是如何工作的。

4

1 回答 1

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/

于 2013-10-20T14:33:10.003 回答