Html 是否有网格系统对柱使用基于百分比的宽度，对排水沟使用基于px的值？

我正在寻找一个IE11支持的网格解决方案，它使用基于百分比的列宽和基于px的水槽。我正在寻找一个网格布局，它具有均匀分布的一半、三分之一、四分之一、六分之一和十二分之一，其中的边距可能会根据断点的不同而有所不同。这可能吗

@import "compass/css3";

* {
  @include box-sizing(border-box);
}

$pad: 20px;

.grid {
  background: white;
  margin: 0 0 $pad 0;

  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
    float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
    width: 66.66%;
}
.col-1-3 {
    width: 33.33%;
}
.col-1-2 {
    width: 50%;
}
.col-1-4 {
    width: 25%;
}
.col-1-8 {
    width: 12.5%;
}

.module {
  padding: $pad;
  background: #eee;
}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}

body {
    padding: 10px 50px 200px;
  background: url(https://s.cdpn.io/3/dark_wall_@2X.png);
  background-size: 300px 300px;
}
h1 {
  color: white;
  em {
    color: #666;
    font-size: 16px;
  }
}

Chris Coyier发布了一个解决方案，但它有点不可靠，因为排水沟是由立柱的正确填充定义的： 这意味着，列宽不准确。例如，2列布局的第一列将小于50%以考虑檐槽，但第二列正好是栅格宽度的50%，因为最后一个子级上没有右檐槽

---

我在IE11的flex和网格布局方面遇到了一些问题，因此我计划只使用浮动块元素。

最终代码将取决于您想要的网格类型，但这可能会帮助您：

.grid{
边缘底部：20px；
背景：#8181ac；
}
.网格：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*假设间隙=20px*/
[类别*=“列-”]{
浮动：左；
背景：#cfcfcf；
文本对齐：居中；
右边距：20px；
}
.grid[class*=col-]：类型{margin right:-20px；}的最后一个
.col-1-2{宽度：calc（100%*1/2-20px/（2/1））；}
.col-1-3{宽度：计算（100%*1/3-20px/（3/2））；}
.col-2-3{宽度：计算（100%*2/3-20px/（3/1））；}
.col-1-4{宽度：计算（100%*1/4-20px/（4/3））；}
.col-2-4{宽度：计算（100%*2/4-20px/（4/2））；}

1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/4
2/4
1/4

这就是我想到的。我不是一个数学爱好者，所以我不能告诉你为什么这些宽度方程有效，或者是否有更好的算法

---

这对两列行很有效，但我需要将网格拆分为三分之一、四分之一、六分之一和二十分之一。您的解决方案非常有用，我对它进行了调整以达到我的目的。@oaklandrichie我对我的代码非常自信，所以我没有使用更多的列进行测试！你是对的，我的计算是错的。你所做的纠正似乎是朝着正确的方向迈出的一步，但并不是在所有情况下都有效（但同样，对于你需要做的事情来说，也许已经足够了）。不管怎样，我刚刚编辑了我的答案，如果是一个更复杂的方程，我想现在它在任何情况下都会起作用我也不是很擅长数学，所以也许有一种更简单的方法来计算宽度？是的，我相信我的解决方案只适用于均匀分割的行（没有混合和匹配的列宽度）。然而，我的网格也允许不同的排水沟宽度。再次感谢您的帮助。@oaklandrichie非常欢迎您！如果你的问题解决了，请考虑接受你或我的答案（只需点击答案旁边的复选标记）。我的错误：你的解决方案也适用于不同的排水沟宽度。从你上一篇文章中，我可以看出你已经发布了解决方案。如果您尝试将有用的答案标记为已接受的答案，这将对其他社区成员将来有所帮助。谢谢你的理解，谢谢！只要我有能力，我会的。

.grid {
  margin-bottom: 20px;
  background: #8181ac;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
  background: #cfcfcf;
  text-align: center;
  margin-right: 20px;
}

.grid [class*=col-]:last-of-type { margin-right: 0; }

.col-1-2 { width: calc(100% * 1 / 2 - 20px / 2); }
.col-1-3 { width: calc(100% * 1 / 3 - 20px / 1.5); }
.col-1-4 { width: calc(100% * 1 / 4 - 20px / 1.33); }
.col-1-6 { width: calc(100% * 1 / 6 - 20px / 1.2); }
.col-1-12 { width: calc(100% * 1 / 12 - 20px / 1.09); }