Question

我正在尝试创建一个移动友好的响应棋盘，并在窗口最小化时改变大小但我似乎无法摆脱内部div颜色和外部div sqaure之间的这个空间。不知道我做错了什么。

HTML：

<body>
  <p></p>
  <div class="square">

    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <!--2nd -->

    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <!--2nd -->

    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <!--2nd -->

    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <!--2nd -->

    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <!--2nd -->

    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <!--2nd -->

    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <!--2nd -->

    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>

  </div>

</body>

CSS：

.square {
  border: 10px solid gray;
  text-align: center;
  width: 60vw;
  height: 60vw;    
  margin: auto;
}
.red {
  background-color: red;
  height: 11.5%;
  width:  11.5%;
  max-height: 100vw;
  max-width: 100vw;
  float: left;    
  padding:0;
  margin:auto;

}

.black {
  background-color: black;
  height: 11.5%;
  width:  11.5%;
  max-height: 100vw;
  max-width: 100vw;
  float: left; 
  padding:0;
  margin:auto;
}

Answer 1

你的数学有问题。你给每个方格的宽度为11.5％，这相当于92％。应该是12.5％加起来100％（即容器的整个宽度）。

＆＃13;

.square {
  border: 10px solid gray;
  text-align: center;
  width: 60vw;
  height: 60vw;
  margin: auto;
}

.red {
  background-color: red;
  height: 12.5%;
  width: 12.5%;
  max-height: 100vw;
  max-width: 100vw;
  float: left;
  padding: 0;
  margin: auto;
}

.black {
  background-color: black;
  height: 12.5%;
  width: 12.5%;
  max-height: 100vw;
  max-width: 100vw;
  float: left;
  padding: 0;
  margin: auto;
}

＆＃13;

<body>
  <p></p>
  <div class="square">

    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <!--2nd -->

    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <!--2nd -->

    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <!--2nd -->

    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <!--2nd -->

    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <!--2nd -->
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <!--2nd -->
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <!--2nd -->
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="red"></div>

  </div>

</body>

＆＃13;

JSFiddle

如何创建响应棋盘

1 个答案: