如何摆脱两个侧面板元件之间的空间？

Question

以下是我要做的事情的蓝图：

我正在尝试获取红色轮廓所在的统计元素。我不确定为什么统计数据和平衡面板之间存在巨大差距。我正在使用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>

Answer 1

由于您使用了inline-block，因此可以使用vertical-align控制统计信息面板的对齐方式。请参阅下面的修改。

＆＃13;

＆＃13;

/* 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;
}

/* 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;
    vertical-align: middle;
}

＆＃13;

<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>
        <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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将vertical-align: top;和margin-top: calc(10% + 20px);添加到.status css

.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;
vertical-align: top;
margin-top: calc(10% + 20px);

}