Question

我正在尝试使用javaScript和HTML构建一个俄罗斯方块游戏而不需要任何教程。我的方法很原始。我正在使用div标签制作我的网格。问题是它没有我预期的那么敏感。

这是我的网格中的一行：

                <div class="row">
                <div id="sq1" class="square fender">&nbsp;</div>
                <div id="sq2" class="square free">&nbsp;</div>
                <div id="sq3" class="square free">&nbsp;</div>
                <div id="sq4" class="square free">&nbsp;</div>
                <div id="sq5" class="square free">&nbsp;</div>
                <div id="sq6" class="square free">&nbsp;</div>
                <div id="sq7" class="square free">&nbsp;</div>
                <div id="sq8" class="square free">&nbsp;</div>
                <div id="sq9" class="square free">&nbsp;</div>
                <div id="sq10" class="square free">&nbsp;</div>
                <div id="sq11" class="square free">&nbsp;</div>
                <div id="sq12" class="square fender">&nbsp;</div>
            </div>

我正在为每个方块使用这种风格：

.square {
float: left;
width: 6%;
padding-bottom: 6%; 
border-top: 1px solid black;
border-left: 1px solid black;}

但是当我调整页面大小时，我的方块会变成矩形。我也使用类似的较小网格来显示下一个部分。它被其他标签包围，可能会使其变形。（整个项目在codepen。）

有没有简单的方法让我的方块正方形？我找到了几种如何制作响应广场的方法，但没有一种方法适合我。

Answer 1

你已经拥有了你已经拥有的东西。

查看您的标记，看起来您想要连续12个方格，所以我使用width: 8%;。而且，正如您正确尝试的那样，您还需要添加一个匹配8％的padding-bottom。 E.g。

.square {
    float: left;
    width: 8%;
    padding-bottom: 8%; /* = width for a 1:1 aspect ratio */
    border-top: 1px solid black;
    border-left: 1px solid black;
}

您的方块未按宽高比固定的原因是您添加到所有 方块的div。你不能直接在正方形内添加内容（没有绝对定位的孩子），因为它会增加它们的高度，因此正方形不再是正方形。

删除所有这些不间断的空格后，您的方块将保持其宽高比。

最后，我整理了几个虽然不相关的HTML错误，完整的分叉示例在这里：https://codepen.io/ahdigital/pen/LeNNWY?editors=1100

使用div标签的响应式俄罗斯方块网格

1 个答案: