Javascript 如何使边距不偏移我的网格_Javascript_Css

Javascript 如何使边距不偏移我的网格

javascript css

Javascript 如何使边距不偏移我的网格,javascript,css,Javascript,Css,我目前正在做一个游戏，其中方块是为了在游戏中前进。目前，我正试图找出如何使框在显示时没有偏移。相反，我希望它们处于一个相等的网格中。我想不出如何摆脱这种恼人的抵消。我的代码如下： JavaScript: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script> <body> <div id = "square1" class =

我目前正在做一个游戏，其中方块是为了在游戏中前进。目前，我正试图找出如何使框在显示时没有偏移。相反，我希望它们处于一个相等的网格中。我想不出如何摆脱这种恼人的抵消。我的代码如下：

JavaScript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">  </script>
<body>
<div id = "square1" class = "gridsquare">
<div class = "gridsquarecontent" id = "square1content">
Welcome to Idle Grid! An exponentially complex idle displayed through stylish boxes! This cute little square is the one to get new squares. <button onclick = "$('#square2').show();document.getElementById('square1content').innerHTML =  'Nice! Use your new square to afford the next one!'" id = "btn-1">Get a new square</button>
</div>
</div>
<div id = "square2" class = "gridsquare">
<div class = "gridsquarecontent">
Git gud
</div>
</div>
</body>
<script>$("#square2").hide()</script>

您有许多大于0的页边距。将它们设置为零，并仅增加定位所需的值。现在我认为你有一个边距“堆叠”的案例。
将你的“堆叠”归零，首先从最重要的边距开始，然后根据需要添加更多边距。
记住，如果有紧密配合，边距往往会推动对象。

你有很多边距>0。将它们设置为零，并仅增加定位所需的值。现在我认为你有一个边距“堆叠”的例子。
将你的“堆叠”归零，首先从最重要的边距开始，然后根据需要添加更多的边距。
记住，如果有紧密配合，边距往往会推动对象。

确保你有一个活动区域（一个有自己规则指定宽度的固定div）并在父元素下加载正方形。然后只需在.gridsquare规则中添加float:left，方块就会就位。

确保您有一个活动区域（一个holder div，它有自己指定宽度的规则）并将方块加载到父元素下。然后只需在.gridsquare规则中添加float:left，方块就会就位。

我添加了一个float:left；到gridsquare，这似乎解决了问题。看看这是否解决了你的问题：（不确定你要做什么）你在每个主要浏览器中都有相同的结果吗？我添加了一个float:left；到gridsquare，这似乎解决了问题。看看这是否解决了你的问题：（不确定你想要什么）你在每个主要的浏览器中都有相同的结果吗？

body{width:820px;height:820px;border-color:black;border-width:0px;border-style:solid;margin:5px;font-family:arial;font-size:14px;margin-top:0px}
.gridsquare{width:200px;height:200px;border-color:black;border-width:1px;border-style:solid;display:inline-block;overflow:none;background-color:white;margin-top:5px}
.gridsquarecontent{margin:10px;overflow:none}
button{background-color:white;border-color:Black;border-width:1px;display:block;margin-top:5px;transition: background-color,color 0.3s}
button:hover{outline:0;background-color:black;color:white}
button:focus{outline:0}