为什么l-box打破了Purecss.io网格？

Question

似乎无法弄清楚为什么一旦我将l-box类添加到我的div元素中它就会破坏Purecss.io中的网格

我在这里关注模板http://purecss.io/layouts/marketing/，但正如您在我的codepen http://codepen.io/anon/pen/axAGJ中所看到的那样，添加l-box皇家般地将4列模式搞定，但似乎只能在模板中查找

我检查了我和模板上的元素，我看到的问题是div本身的宽度在我的演绎中更大但是我不知道是什么导致了这种情况或如何改变它。

我已经尝试调整字体大小，但元素仍然堆叠不正确。

模板div宽度277.500px 我的div宽度为330.250px

.l-box {
padding: 1em;
}

Answer 1

您遇到的最大问题是填充物会影响您的盒子。为了解决这个问题，有一个名为box-sizing:的css属性。

box-sizing属性允许您以某种方式定义某些元素以适合某个区域。因此，通过将此属性设置为border-box，您将在div中包含内容，填充和边框，而不是推出使其大于您期望的值。

但要小心，因为这个属性有点新，可能需要使用旧浏览器的人退回。

用法示例：

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

这将确保l-box上的填充发生在div内。