Question

我的问题与CSS Two Columns of Lists - responsive merge into one column有关。

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

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

我希望在一个具有可变列数（小于某个限制k）的表中显示元素，仅使用CSS（最好是独立于浏览器）。

如果我可以将n限制到某个限制，则可以实现。但我希望n可以是任何数字。

我正在使用媒体查询，但我无法控制行y位置。

我当前的SASS代码在这里（k = 20）。

.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

Answer 1

我通过将$ content-wrapper-height设为300px / $ i

解决了这个问题

带CSS的响应列计数表

1 个答案: