如何将基于百分比的边距放入CSS网格?

时间:2014-09-30 17:32:31

标签: page-layout css

我正在努力学习如何构建网格系统 - 到目前为止this is what I've got。我想知道的是,我如何在列之间创造实际的差距?如果我放入一个边距,一切都会离开网格,因为“box-sizing”只考虑边框和填充。我能想到的唯一方法就是给每一列增加一个粗边。

有没有办法让边距有效,所以列之间有实际的空间?

1 个答案:

答案 0 :(得分:0)

通过智能但基本使用伪类,您可以轻松获得一个很好的解决方案。

假设您的列使用的是.column类,您需要5列。那将是每个20%,减去2%的差距(例如)。

首先,使用box-sizing: border-box;,您提到的宽度包括填充和边框,这是一个相当不错的做法。

.col {
box-sizing: border-box;
width: 18%;
margin-right: 2%;
}

之后,对于最后一个.col,我们可以使用伪类:last-child并覆盖右边距,如下所示:

.col:last-child {
margin-right: 0;
}

这个例子中的数字实际上并没有正确处理,但它说明了在使用可扩展和可维护的CSS代码时实现目标的好方法。

编辑:在审核完笔后,我强烈建议您不要使用边框来分隔"分开"列。它是一个视觉 hack 而且不再是,实际上取决于您网站的背景颜色。我建议详细了解"大镜头"正在这样做,例如 Bootstrap 基金会