css - 在未知列数处均衡水平列填充

Question

我正在努力解决多列设置的问题。

给定三列的简单设置，我想调整填充，使列之间的每个间隙大小相同 (2rem)。但是，棘手的部分是:我希望能够对 2、3、4 甚至 5 列使用相同的规则。

我正在使用 PureCSS 自行创建多列设置。不过，不必了解此框架，因为我的问题与它无关。

目前有以下标记:

<div class="pure-g">
  <div class="pure-u-1-3"><div class="myblock">content col 1</div></div>
  <div class="pure-u-1-3"><div class="myblock">content col 2</div></div>
  <div class="pure-u-1-3"><div class="myblock">content col 3</div></div>
</div>

当然，每列的宽度为 33.333 %。为了在两者之间创建间隙，我的想法是为每一列使用一个内部包装器，将其内容推离两侧。

<div class="pure-g">
  <div class="pure-u-1-3 col">
    <div class="col-wrapper">
      <div class="myblock">content col 1</div>
    </div>
  </div>

  <div class="pure-u-1-3 col">
    <div class="col-wrapper">
      <div class="myblock">content col 2</div>
    </div>
  </div>

  <div class="pure-u-1-3 col">
    <div class="col-wrapper">
      <div class="myblock">content col 3</div>
    </div>
  </div>
</div>

现在我给 .col-wrapper 一些填充。但在这里我无法找到适用于所有列数的干净解决方案。我的想法是:

.col > .col-wrapper {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Overwrite padding for an exact left alignment */
.col:first-child > .col-wrapper {
  padding-left: 0;
}

/* Overwrite padding for an exact right alignment */
.col:first-child > .col-wrapper {
  padding-right: 0;
}

但鉴于此 CSS，第一列和最后一列的大小始终与其余列不同，因为它们的填充少了 1rem。

下一个想法是，进一步调整它，这几乎是完美的，但它会导致第一个/最后一个和其他间隙不同。

.col > .col-wrapper {
  padding-left: .67rem;
  padding-right: .67rem;
}

/* Overwrite padding for an exact left alignment */
.col:first-child > .col-wrapper {
  padding-right: 1.32rem;
  padding-left: 0;
}

/* Overwrite padding for an exact right alignment */
.col:first-child > .col-wrapper {
  padding-right: 0;
  padding-left: 1.32rem;
}

我卡在这里了。您将如何调整它以产生均匀的间隙？

感谢您的帮助:-)

Answer 1

I am using PureCSS to create the multi-column setup itself. Knowledge of this framework should not be necessary though, as my problems don't have to do with it.

您的问题与 purecss 的使用有关，因为您限制自己从以固定百分比设置的列开始寻找解决方案。

您可以在不使用 purecss 的情况下轻松实现等宽列，而是使用 flexbox(参见示例 http://codepen.io/imohkay/pen/gpard)。

 <div class="equalHMWrap eqWrap">
    <div class="equalHM eq">boo <br> boo</div>
    <div class="equalHM eq">shoo</div>
    <div class="equalHM eq">clue</div>
 </div>

CSS

.eqWrap {
    display: flex;
}
.equalHMWrap {
    justify-content: space-between;
}
.equalHM {
    width: 32%;
}

我不确定是否有可能在使用 purecss 的同时对不同数量的列使用相同规则的解决方案。左、右、第一个 child 和最后一个 child 的填充百分比将始终根据使用的列数而变化。但是您可以为每个场景计算它并在适用时添加 css 规则。