带有CSS的响应列计数表

我的问题是关于

我有以下html（元素列表（#elements=n））

---

我通过将$content包装高度设置为300px/$I解决了这个问题

<div>
  <div>e1</div>
  <div>e2</div>
  <div>e3</div>
    …
</div>

.contents-wrapper
  position: relative
  top: $header-height + 30
  width: 0px
  margin:
    left: auto
    right: auto
  $min-width: 100px
  $content-wrapper-width: 200px
  $interval-width: 30px
  @function get-contents-width($n)
    @return $n * ($interval-width + $content-wrapper-width) - $interval-width
  @function get-width($n)
    @return get-contents-width($n) + $min-width
  @for $i from 1 through 20
    $current-min-width: get-width($i)
    @if $i == 1
      $current-min-width: 0px
    $current-max-width: get-width($i + 1) - 1
    $current-width: get-contents-width($i)
    @media screen and (min-width: $current-min-width) and (max-width: $current-max-width)
      > .contents
        position: absolute
        left: - $current-width / 2
        > .content-wrapper
          @for $j from 1 through $i
            &:nth-child(#{$i}n+#{$j})
              position: relative
              $content-wrapper-height: 300px
              left: ($j - 1) * ($content-wrapper-width + $interval-width)
              top: - ($j - 1) * $content-wrapper-height
              width: $content-wrapper-width
              height: $content-wrapper-height
              > .content
                position: absolute
                > .title
                  display: none
                > .image