Question

我正在寻找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）发布了一个解决方案，但有点不方便，因为装订线是由列的正确填充定义的：https://codepen.io/chriscoyier/pen/eGcLw 这意味着列宽不正确。例如，2列布局的第一列将小于50％以解决装订线，但是第二列将恰好是网格宽度的50％，因为在最后一个子级上没有右装订线。 / p>

我在IE11的flex和grid布局上遇到了一些问题，所以我打算只使用浮动块元素。

Answer 1

最终代码将取决于您确切想要的网格类型，但这也许会帮助您：

.grid {
  margin-bottom: 20px;
  background: #8181ac;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

/* Let's assume that the gap = 20px */

[class*='col-'] {
  float: left;
  background: #cfcfcf;
  text-align: center;
  margin-right: 20px;
}

.grid [class*=col-]:last-of-type { margin-right: -20px; }

.col-1-2 { width: calc(100% * 1 / 2 - 20px / (2 / 1)); }

.col-1-3 { width: calc(100% * 1 / 3 - 20px / (3 / 2)); }
.col-2-3 { width: calc(100% * 2 / 3 - 20px / (3 / 1)); }

.col-1-4 { width: calc(100% * 1 / 4 - 20px / (4 / 3)); }
.col-2-4 { width: calc(100% * 2 / 4 - 20px / (4 / 2)); }

<div class="grid">
   <div class="col-1-2"><h3>1/2</h3></div>
   <div class="col-1-2"><h3>1/2</h3></div>
</div>

<div class="grid">
   <div class="col-1-3"><h3>1/3</h3></div>
   <div class="col-1-3"><h3>1/3</h3></div>
   <div class="col-1-3"><h3>1/3</h3></div>
</div>

<div class="grid">
   <div class="col-1-3"><h3>1/3</h3></div>
   <div class="col-2-3"><h3>2/3</h3></div>
</div>

<div class="grid">
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
</div>

<div class="grid">
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-2-4"><h3>2/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
</div>

使用SCSS语法，在上面的示例中，col width的计算方式如下：

calc(100% * #{$colSize} / #{$gridSize} - #{$gap} / (#{$gridSize} / (#{$gridSize} - #{$colSize})));

然后在margin-right上用[class*='col-']设置间隔。

您当然可以编写一个mixin来动态创建选择器：

$gap: 20px;
$maxGridCol: 5;

@for $i from 1 through $maxGridCol {
   @for $y from 1 through $i {
      [class*="col-#{$y}-#{$i}"] {
         width: calc(100% * #{$y} / #{$i} - (#{$gap} / (#{$i} - #{$y})));
      }
   }
}

Answer 2

这是我想出的。我不是数学家，所以我无法告诉您为什么这些宽度方程有效，或者是否有更好的算法。

https://codepen.io/richiegarcia/pen/YBEVQR

$ ls -1 opencryptobot/
START.py
$ cat opencryptobot/START.py
import sys
import os

if __name__ == '__main__':
    print('Running as the __main__ script')
    print('sys.argv:', sys.argv)
    print('__spec__.name:', __spec__.name)

    if 'restarted' not in sys.argv:
        print('Respawning:')
        # add an extra command-line option to stop respawning a second time
        os.execl(sys.executable, sys.executable, '-m', __spec__.name, *sys.argv[1:], 'restarted')
$ python3.7 -m opencryptobot.START -lvl 20
Running as the __main__ script
sys.argv: ['/.../opencryptobot/START.py', '-lvl', '20']
__spec__.name: opencryptobot.START
Respawning:
Running as the __main__ script
sys.argv: ['/.../opencryptobot/START.py', '-lvl', '20', 'restarted']
__spec__.name: opencryptobot.START

是否有一个网格系统对列使用基于百分比的宽度，对装订线使用px值？

2 个答案: