Question

我需要为项目提供一个接口，其中编辑器能够使用一些变量定义容器元素：他/她应该能够定义有多少列，以及它们在不同屏幕大小上的行为。

为此，我采用了一个网格框架（这里：PureCSS响应网格），让他/她选择给定列具有给定屏幕大小的列大小。因此，可以定义屏幕大小“大”是否在该行中断后到下一行之前应该有两列或三列。

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

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

我试图在使用的框架之上使用CSS规则的一些自定义来解决这个问题，这很好 - 只要它是一个不包装到下一行的单行。当屏幕宽度较小时，它会像它应该的那样包裹，但填充物不再那样。

您是否知道如何解决这个问题，请记住它应该包含“自动”应用的规则，而不需要依赖其他CSS类？

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

<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

来自评论：

以Twitter Bootstrap为例。列具有相同的左右填充padding: 0 20px;，行将通过margin: 0 -20px;取消填充，从而导致行填充所需的100％容器

CSS：如何定义响应列之间的间距

1 个答案: