css - 如何将排水沟添加到纯网格

Question

我需要在我使用的纯网格中添加排水沟。因为默认情况下我需要它，它应该像这个例子一样像常规的纯网格 css 一样工作:

<div class="pure-g">
    <div class="pure-u-1-2">
        <label for="username">username</label>
        <input id="username" />
    </div>
    <div class="pure-u-1-2">
        <label for="password">password</label>
        <input type="password" id="password" />
    </div>
</div>

到目前为止我尝试了什么:

[class^="pure-u-"] {
    margin-right: 24pt;
    padding-right:12pt;
}

[class^="pure-u-"]:last-of-type {
    margin:0;
    padding:0;
}

我也尝试过使用 box-sizing 但它也没有用:

[class^="pure-u-"] {
    box-sizing: border-box;
    margin-right:12pt;
}

我还得担心浏览器支持。不太好，但如果旧浏览器能正确显示它们，那就太好了。

---

Answer 1

更新:

我找到了一种更好的方法来做到这一点，而且也更容易。

/* Add a gutter to Pure's Columns */
.pure-g {
  margin: 0 -1em;
}

.pure-g > div {
  padding: 0 1em;
}

就是这样。更易于从下到上阅读:在 pure-g div 的所有 div 子元素的左侧和右侧添加 1em 的间距。然后在pure-g容器上，左右减去1em。从第一个和最后一个 pure-u-whatever 中取消填充。

为什么这样更好？

因为如果您连续使用三个 pure-u-1-2，您将不会以不稳定的填充结束。

---

只需在 pure-g 的所有直接子 div 上添加左右填充(如果您遵循规范，则必须是 pure-u-blah 类)。然后去掉第一个的左填充，最后一个的右填充。

理想情况下，我会使用边距，这样背景样式也会被隔开，但我无法让它工作。此外，第一列和最后一列将比任何中间列稍宽，因为它们的间距少了一个。

.pure-g > div {
  padding: 0 1em;
}

.pure-g > div:first-child {
  padding-left: 0;
}

.pure-g > div:last-child {
  padding-right: 0;
}

解决此类布局问题的一个好技巧是将以下行添加到您的 CSS:

* { box-shadow: 0 0 1px red; }

这将在所有内容周围添加一个淡红色边框，而不会像边框规则那样更改布局。

如果列与此代码垂直堆叠，请检查您的框大小。奇怪的是，Pure 并没有将其设置为网格。我总是在某个地方的 reset.css 文件中为 * 设置这个。

.pure-g > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}