gpt4 book ai didi

javascript - 如何让边距不偏移我的网格

转载 作者:行者123 更新时间:2023-11-28 06:04:38 24 4
gpt4 key购买 nike

我目前正在开发一款游戏,其中的方 block 是为了在游戏中前进而制作的。目前,我正在尝试弄清楚如何制作它,以便框在显示时没有偏移。相反,我希望它们处于平等的网格中。我不知道如何摆脱这个恼人的偏移。我的代码如下:

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>

CSS:

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}

最佳答案

确保您有一个事件区域(一个持有者 div,其自己的规则指定宽度)并将您的方 block 加载到该父元素下。然后只需在 .gridsquare 规则上添加 float:left ,方 block 就会就位。

关于javascript - 如何让边距不偏移我的网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36994118/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com