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，第一列和最后一列的大小总是与其余列不同，因为它们的填充量少了1个。

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

.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

我正在使用PureCSS来创建多列设置。知识但是，这个框架不应该是必要的，因为我的问题不是与此有关。

您的问题与使用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。 left，right，first-child和last-child的填充百分比将始终根据使用的列数而变化。但您可以为每个方案计算它并添加适用的css规则。

在未知列数的情况下均衡水平列填充

1 个答案: