0
這裏是什麼，我試圖做一個藍圖：如何擺脫兩個側面板元件之間的空間？
我想獲得的統計數據元素，其中的紅色輪廓。我不確定爲什麼統計和平衡面板之間存在巨大差距。我正在使用display:inline-block;將這些面板從我的.gamebox元素的左邊。
的CSS面板：
/* Balance box */
.balance{
height: 10%;
margin: 20px;
width: 30%;
font-family: "smooth";
background-color: white;
color: black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display:inline-block;
position: fixed;
}
/* stats box */
.stats{
height: auto;
margin: 20px;
width: 30%;
font-family: "smooth";
background-color: white;
color: black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display:inline-block;
}
CSS遊戲面板：
/* Game box */
.gamebox{
height: auto;
margin: 20px;
padding: 20px;
width: 50%;
font-family: "smooth";
background-color: white;
color: black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display:inline-block;
}
HTML：
<div class="gamebox">
<h1><i class="fa fa-btc" aria-hidden="true"></i>itcoin dice game</h1>
<div class="error" id="error">You don't have anymore bitcoins left. Why not deposit some more?</div>
<form id="index">
Bet
<br>
<span>
<input id="userbet" onkeyup="checkBet()" value="100" type="text" name="bet" autocomplete="off">
<span id="beterror" class="errortext">That bet is not a valid bet.</span>
<span id="x2" class="timestwo" onclick="doubleBet()">x2</span>
<span id="/2" class="dividetwo" onclick="divideBet()">/2</span>
</span>
<br>
<span>
Chance<br>
<input id ="userchance" onkeyup="checkChance()" value="50" type="text" name="chance" autocomplete="off">
<span id="chanceerror" class="errortext">That is not a valid chance.</span>
</span>
<br>
<h3 id="payout">Profit: Loading...</h3>
<script>var username = <?php echo json_encode($_SESSION['username']); ?>;</script>
<script>var hash = <?php echo json_encode($_SESSION['hash']); ?>;</script>
<button type="button" id="dicebutton" onclick="prepareRoll(username, hash);" style="vertical-align:middle"><i class="fa fa-gamepad" aria-hidden="true"></i> Roll dice</button>
</form>
<button type="button" id="autobet" onclick="setAutoBet(true)"><i class="fa fa-rocket" aria-hidden="true"></i> Autobet</button>
<div class="autobet-mode" id="autobet-mode">
<h3 id="auto-bet-start-text">Please set your auto bet settings, then click 'Start rolling'!".</h3>
<button type="button" id="start-autobet" onclick="startAutoBet()">Start rolling!</button>
</div>
</div>
<div class="balance">
<h3 id="balance">Balance: Loading...</h3>
</div>
<div class="stats">
<p>Stats</p>
<p>Profit: 0BTC</p>
<p>Wagered: 0BTC</p>
<p>Wins: 0</p>
<p>Losses: 0</p>
</div>
嗨，這幾乎工程，但它做這種奇怪的重疊。我不確定爲什麼一個元素會這樣做：http://prntscr.com/g1mnf1 – webcod3rr
這是因爲您的平衡面板是'position：fixed;'。它相對於您的瀏覽器窗口定位，並且不在頁面的常規「流」中。 –
你可以做的是在你的統計面板上添加一個「margin-top」，將它放置在平衡面板下面（當頁面一直向上滾動時）。 –