/* 参考 BootStrap 3 栅格布局 inkScholar 改版 兼容 IE 9 的栅格布局 */
/* bootstrap xs 768 sm 992 md 1200 lg*/
/* inkScholar 500 a 768 b 992 c 1200 d */
/** 兼容性 摘自权威机构 MDN
 * overflow -- Chrome 1.0 / Firefox(Gecko) 1.0 (1.7 or earlier)[1] / Internet Explorer 4.0[2] / Opera 7.0 / Safari 1.0 (85) // Firefox Mobile (Gecko) 1.0 (1) // Question [1] Firefox 3.6 (Gecko 1.9.2) / [2]Internet Explorer 4 － 6
 * overflow-x -- Chrome 1 / Edge 12 / Firefox 3.5 / Internet Explorer 5 / Opera 9.5 / Safari 3 // WebView Android 1 / Chrome Android 18 Firefox for Android 4 / Opera Android 14 / Safari on IOS 1 Samsung Internet 1.0
 * height
 * box-sizing
 * float
 * clear
 * width
 * 综上所述
 */
/** 问题 需要完善
 * 优先级有待考虑
 * 控制高度可用 padding
 * li/div 的 box-sizing: border-box 是否有必要
 * clear:both 为什么只会清除上一个 标签 带来的浮动，而不会清除 下一个标签 浮动造成的效果，不会让下一个元素占位到下一行。若改为 clear:left 若修改 ul/div 为 float:right 非常麻烦
 * 兼容性未整理完，甚至可兼容至 IE7 ，但是某些样式需要调整
 */
ul.inklay, div.inklay {
  overflow: hidden;
  height: auto;
}
ul.inklay>li, div.inklay>div {
  width: 100%;
  height: inherit;
  box-sizing: border-box;
  overflow-x: hidden;
  float: left;
}
@media (min-width:500px) {
  ul.inklay.a6>li:not(:nth-child(2n+3)), div.inklay.a6>div:not(:nth-child(2n+3)),
  ul.inklay.a4>li:not(:nth-child(3n+4)), div.inklay.a4>div:not(:nth-child(3n+4)),
  ul.inklay.a3>li:not(:nth-child(4n+5)), div.inklay.a3>div:not(:nth-child(4n+5)),
  ul.inklay.a2>li:not(:nth-child(6n+7)), div.inklay.a2>div:not(:nth-child(6n+7)),
  ul.inklay.a1>li:not(:nth-child(12n+13)), div.inklay.a1>div:not(:nth-child(12n+13)) {
    clear: none;
  }
  ul.inklay.a6>li:nth-child(2n+3), div.inklay.a6>div:nth-child(2n+3),
  ul.inklay.a4>li:nth-child(3n+4), div.inklay.a4>div:nth-child(3n+4),
  ul.inklay.a3>li:nth-child(4n+5), div.inklay.a3>div:nth-child(4n+5),
  ul.inklay.a2>li:nth-child(6n+7), div.inklay.a2>div:nth-child(6n+7),
  ul.inklay.a1>li:nth-child(12n+13), div.inklay.a1>div:nth-child(12n+13) {
    clear: both; /* clear 为什么不会清除右边的浮动 */
  }
  ul.inklay.a6>li, div.inklay.a6>div {
    width: 50%;
  }
  ul.inklay.a4>li, div.inklay.a4>div {
    width: 33.3333%;
  }
  ul.inklay.a3>li, div.inklay.a3>div {
    width: 25%;
  }
  ul.inklay.a2>li, div.inklay.a2>div {
    width: 16.6666%;
  }
  ul.inklay.a1>li, div.inklay.a1>div {
    width: 8.3333%;
  }
}
@media (min-width:768px) {
  ul.inklay.b6>li:not(:nth-child(2n+3)), div.inklay.b6>div:not(:nth-child(2n+3)),
  ul.inklay.b4>li:not(:nth-child(3n+4)), div.inklay.b4>div:not(:nth-child(3n+4)),
  ul.inklay.b3>li:not(:nth-child(4n+5)), div.inklay.b3>div:not(:nth-child(4n+5)),
  ul.inklay.b2>li:not(:nth-child(6n+7)), div.inklay.b2>div:not(:nth-child(6n+7)),
  ul.inklay.b1>li:not(:nth-child(12n+13)), div.inklay.b1>div:not(:nth-child(12n+13)) {
    clear: none;
  }
  ul.inklay.b6>li:nth-child(2n+3), div.inklay.b6>div:nth-child(2n+3),
  ul.inklay.b4>li:nth-child(3n+4), div.inklay.b4>div:nth-child(3n+4),
  ul.inklay.b3>li:nth-child(4n+5), div.inklay.b3>div:nth-child(4n+5),
  ul.inklay.b2>li:nth-child(6n+7), div.inklay.b2>div:nth-child(6n+7),
  ul.inklay.b1>li:nth-child(12n+13), div.inklay.b1>div:nth-child(12n+13) {
    clear: both;
  }
  ul.inklay.b6>li, div.inklay.b6>div {
    width: 50%;
  }
  ul.inklay.b4>li, div.inklay.b4>div {
    width: 33.3333%;
  }
  ul.inklay.b3>li, div.inklay.b3>div {
    width: 25%;
  }
  ul.inklay.b2>li, div.inklay.b2>div {
    width: 16.6666%;
  }
  ul.inklay.b1>li, div.inklay.b1>div {
    width: 8.3333%;
  }
}
@media (min-width:992px) {
  ul.inklay.c6>li:not(:nth-child(2n+3)), div.inklay.c6>div:not(:nth-child(2n+3)),
  ul.inklay.c4>li:not(:nth-child(3n+4)), div.inklay.c4>div:not(:nth-child(3n+4)),
  ul.inklay.c3>li:not(:nth-child(4n+5)), div.inklay.c3>div:not(:nth-child(4n+5)),
  ul.inklay.c2>li:not(:nth-child(6n+7)), div.inklay.c2>div:not(:nth-child(6n+7)),
  ul.inklay.c1>li:not(:nth-child(12n+13)), div.inklay.c1>div:not(:nth-child(12n+13)) {
    clear: none;
  }
  ul.inklay.c6>li:nth-child(2n+3), div.inklay.c6>div:nth-child(2n+3),
  ul.inklay.c4>li:nth-child(3n+4), div.inklay.c4>div:nth-child(3n+4),
  ul.inklay.c3>li:nth-child(4n+5), div.inklay.c3>div:nth-child(4n+5),
  ul.inklay.c2>li:nth-child(6n+7), div.inklay.c2>div:nth-child(6n+7),
  ul.inklay.c1>li:nth-child(12n+13), div.inklay.c1>div:nth-child(12n+13) {
    clear: both;
  }
  ul.inklay.c6>li, div.inklay.c6>div {
    width: 50%;
  }
  ul.inklay.c4>li, div.inklay.c4>div {
    width: 33.3333%;
  }
  ul.inklay.c3>li, div.inklay.c3>div {
    width: 25%;
  }
  ul.inklay.c2>li, div.inklay.c2>div {
    width: 16.6666%;
  }
  ul.inklay.c1>li, div.inklay.c1>div {
    width: 8.3333%;
  }}
@media (min-width:1200px) {
  ul.inklay.d6>li:not(:nth-child(2n+3)), div.inklay.d6>div:not(:nth-child(2n+3)),
  ul.inklay.d4>li:not(:nth-child(3n+4)), div.inklay.d4>div:not(:nth-child(3n+4)),
  ul.inklay.d3>li:not(:nth-child(4n+5)), div.inklay.d3>div:not(:nth-child(4n+5)),
  ul.inklay.d2>li:not(:nth-child(6n+7)), div.inklay.d2>div:not(:nth-child(6n+7)),
  ul.inklay.d1>li:not(:nth-child(12n+13)), div.inklay.d1>div:not(:nth-child(12n+13)) {
    clear: none;
  }
  ul.inklay.d6>li:nth-child(2n+3), div.inklay.d6>div:nth-child(2n+3),
  ul.inklay.d4>li:nth-child(3n+4), div.inklay.d4>div:nth-child(3n+4),
  ul.inklay.d3>li:nth-child(4n+5), div.inklay.d3>div:nth-child(4n+5),
  ul.inklay.d2>li:nth-child(6n+7), div.inklay.d2>div:nth-child(6n+7),
  ul.inklay.d1>li:nth-child(12n+13), div.inklay.d1>div:nth-child(12n+13) {
    clear: both;
  }
  ul.inklay.d6>li, div.inklay.d6>div {
    width: 50%;
  }
  ul.inklay.d4>li, div.inklay.d4>div {
    width: 33.3333%;
  }
  ul.inklay.d3>li, div.inklay.d3>div {
    width: 25%;
  }
  ul.inklay.d2>li, div.inklay.d2>div {
    width: 16.6666%;
  }
  ul.inklay.d1>li, div.inklay.d1>div {
    width: 8.3333%;
  }
}