html - CSS:如何定义响应列之间的间距

Question

我需要为一个元素提供一个界面，在该界面中，编辑者能够使用一些变量定义容器元素:他/她应该能够定义有多少列，以及它们在不同屏幕尺寸上的表现。

为此，我采用了一个网格框架(此处:PureCSS 响应式网格)并让他/她选择给定列对于给定屏幕尺寸的列尺寸。因此，可以定义在“大”屏幕尺寸下，该行在进入下一行之前是否应该有两列或三列。

我解释这个不是因为它的技术部分，而是因为我因此遇到了麻烦。

情况是，页面布局需要在这些列之间进行填充，而不是在行的外侧。

我正在尝试通过在所用框架之上对 CSS 规则进行一些自定义来解决此问题，这种方法工作正常 - 只要它是不换行到下一行的单行。当屏幕宽度较小时，它会像它应该的那样环绕，但填充不再那样工作。

考虑到它应该包含“自动”应用的规则，而不需要依赖额外的 CSS 类，您知道我该如何解决这个问题吗？

我做了一个 fiddle 来演示我的问题。编辑器不必为每个屏幕尺寸定义填充，因为他已经为它定义了列尺寸。填充应该以这种方式“自动”工作。

<style>
    /* Using SCSS for convenience */
    body {
      padding: 1em;
    }

    .pure-g {
      margin-bottom: 1em;

      > div {
        border: thin solid black;
        box-sizing: border-box;
        padding: 0 .5em 1em .5em;

        &:first-child {
          padding-left:  0;
          padding-right: .66em;
        }

        &:last-child {
          padding-left: .66em;
          padding-right: 0;
        }

        > div {
          box-sizing: border-box;
          height: 10em;
          background-color: green;
        }
      }

      &[data-cols="3"] {
        > div:nth-child(2) {
          padding-left:  .33em;
          padding-right: .33em;
        }
      }

      &[data-cols="4"] {
        > div:nth-child(2) {
          padding-left: .33em;
        }

        > div:nth-child(3) {
          padding-right: .33em;
        }
      }
    }
</style>

<div class="pure-g" data-cols="3">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3"><div></div></div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3"><div></div></div>
    <div class="pure-u-1 pure-u-md-1   pure-u-lg-1-3"><div></div></div>
</div>

<div class="pure-g" data-cols="4">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div></div></div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div></div></div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div></div></div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div></div></div>
</div>

<div class="pure-g" data-cols="5">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5"><div></div></div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5"><div></div></div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5"><div></div></div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5"><div></div></div>
    <div class="pure-u-1 pure-u-md-1   pure-u-lg-1-5"><div></div></div>
</div>

我目前所做工作的简短说明:

• 正文应该有填充，这样列就不会触及页面边框。有人可能会争辩说，这可以由列来处理，但在我的实际情况下，还有更多:受约束的容器宽度而不是主体。
• 列之间的间距应始终为 1em，底部边距应始终为 1em。
• 为了使列的内部大小相等，我必须稍微调整一下填充:由于没有外部填充，第一列和最后一列需要调整它们的填充，与它们的填充相同重新感人。我想你会明白我的意思。
• (边框和内部div只是为了形象化)

https://jsfiddle.net/1jv43g02/

谢谢你的帮助

阿恩

Answer 1

来自评论:

Take an example on Twitter Bootstrap. Columns have the same right and left padding padding: 0 20px; and rows will negate that padding via margin: 0 -20px; causing the row to fill the desired 100% of the container