网格重叠行?

本文介绍了网格重叠行?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在创建一个纸牌游戏，我想使用网格来放置纸牌(div).如何创建行重叠的网格，如此图像?

I'm creating a card game and I want to use a grid to position the cards (div's). How can I create a grid where the rows overlap like in this image?

推荐答案

我使用浮点数做到了.至少在所有浏览器中都可以使用.

I did it with floats. At least it works in all browsers.

HTML:

<div class="card-set">
  <div class="row row-1">
    <!-- 1st row -->
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
  </div>
  <div class="row row-2">
    <!-- 2nd row -->
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
  </div>
  <div class="row row-3">
    <!-- 3rd row -->
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
  </div>
  <div class="row row-4">
    <!-- 4rd row -->
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
  </div>
</div>

SCSS

$grid-width: 1000px;
$gutter-horizontal: 15px;
$next-row-margin: 15px;
$card-height: 80px;
$card-gutter: 11px;
$row-number: row !default;

.row {
  max-width: $grid-width;
  margin: 0 auto;
  z-index: 0;
  position: absolute;

  // Clearfix
  &:after {
    content: "";
    display: table;
    clear: both;
  }

  [class^="col-"] {
    float: left;

    &:not(:last-child) {
      margin-right: $gutter-horizontal;
    }
  }
}

@for $i from 2 to 10 {
  .#{$row-number}-#{$i} {
    top: #{$card-gutter * $i};
    z-index: $i - 1;
  }
}

.col-1-of-10 {
  width: calc((100% - 9 * #{$gutter-horizontal})/10);
}

.card {
  position: relative;
  width: 80px;
  background-color: white;
  height: $card-height;
  border: 3px solid black;
  border-radius: 10px;
}

这是一个Codepen: https://codepen.io/alac1984/pen/YzzmRJK ?editors = 1100

Here's a Codepen: https://codepen.io/alac1984/pen/YzzmRJK?editors=1100

这篇关于网格重叠行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！