2016-05-03 28 views
1

我目前正在製作方塊在遊戲中前進的遊戲。目前,我正在設法弄清楚如何製作這些盒子,因爲這些盒子在顯示時沒有偏移量。相反,我希望他們在一個平等的網格。我無法弄清楚如何擺脫這個煩人的抵消。我的代碼如下:如何讓利潤不會抵消我的網格

的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} 
+1

我加了一個float:left;到gridsquare似乎解決它。看看這是否可以解決你的問題:https://jsfiddle.net/qbbfxkbf/(不知道你要做什麼) – mtrueblood

+0

你在每個主流瀏覽器中都有相同的結果嗎? – MadeInDreams

回答

0

確保您有一個活動區域(一個擁有指定寬度的自己的規則的持有者div)並在您的父元素下加載您的方塊。然後,只需在.gridsquare規則中添加float:left,廣場就會落到位。

0

你有很多的利潤> 0。將它們設置爲零並僅增加定位所需的那些。現在我認爲你有一個保證金「堆積」的情況。
將您的「堆疊」歸零並從最重要的邊距開始,然後僅根據需要添加更多邊距。
請記住,如果身體緊張,邊距會傾向於推動物體。