html - 甚至带有文本填充的列？

Question

我是网站 build 的新手，我遇到了第一个更大的 CSS 问题。我有一个简单的 3 列拆分，如下所示:

HTML

<div class="featureSingle">Lorem ipsum dolor sit...</div>
<div class="featureSingle">Lorem ipsum dolor sit...</div>
<div class="featureSingle">Lorem ipsum dolor sit...</div>

CSS

.featureSingle {
    float: left;
    width: 33%;
    padding-right: 5px; 
} 

问题在于右填充(无论如何我都喜欢左填充和右填充)，基本上它搞砸了布局并将第三列移到下方(它太大了)。我认为填充会改变容器内的文本对齐方式，它不应该让它“变大”吗？我该如何解决这个问题？

Answer 1

添加box-sizing: border-box;:

.featureSingle
{
    float: left;
    width: 33%;
    padding-right: 5px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
} 

固定在 fiddle 中:http://jsfiddle.net/y9Jw2/

默认的盒子模型会考虑到您添加的 padding-right，因此最终结果是宽度为 33% + padding 的 5px。这使得您的列占用的空间总量超过浏览器窗口的 100%；所以它不适合所有在一条线上。通过将框模型更改为 border-box，它允许 33% 的宽度将填充考虑在内，从而使总数达到 100%，并允许所有内容都适合。

这是 CSS Tricks 的一篇很棒的文章，可以更详细地解释它:http://css-tricks.com/the-css-box-model/ .