Question

我是网站建设的新手，我遇到了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; 
}

问题在于padding-right（我还是喜欢左右填充），基本上它会搞砸布局并移动下面的第三列（它只是太大了）。我认为填充更改文本对齐容器内部，它不应该使它“更大”？我该如何解决这个问题？

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;
}

固定在小提琴中：http://jsfiddle.net/y9Jw2/

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

以下是CSS Tricks的精彩文章，可以更详细地解释它：http://css-tricks.com/the-css-box-model/。

甚至包含文本填充的列？

1 个答案: