1
Ich arbeite derzeit an einem Spiel, wo Quadrate gemacht werden, um im Spiel voranzukommen. Momentan versuche ich herauszufinden, wie man es macht, damit die Boxen keinen Offset haben, wenn sie angezeigt werden. Stattdessen möchte ich, dass sie in einem gleichen Raster sind. Ich kann nicht herausfinden, wie ich diesen lästigen Offset beseitigen kann. Mein Code ist wie folgt:Wie Ränder nicht mein Raster ausgeglichen haben
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}
Ich habe einen Schwimmer hinzugefügt: links; zu gridsquare, das scheint es zu beheben. Sehen Sie, ob dies Ihr Problem löst: https://jsfiddle.net/qbbfxkbf/ (nicht sicher, was Sie vorhaben) – mtrueblood
Haben Sie das gleiche Ergebnis in jedem großen Browser? – MadeInDreams