似乎无法让两个要素并存

Question

Here is what my webpage looks like: 这是我的网页的样子：

As I highlighted in the picture, I'm trying to move the balance element to the right side. 正如我在图片中突出显示的那样，我试图将balance元素移到右侧。

I am trying to use the display:inline-block tag to do this. 我正在尝试使用display:inline-block标记执行此操作。

Here is my CSS and HTML... what am I doing wrong? 这是我的CSS和HTML ...我在做什么错？

CSS: CSS：

/* Game box */
.gamebox{
    height: auto;
    margin: 20px;
    padding: 20px;
    width: 50%;
    font-family: "smooth";
    background-color: white;
    color: black;
    box-shadow: 4px 4px lightgray;
    display:inline-block;
}

/* Balance box */
.balance{
    height: auto;
    margin: 20px;
    padding: 20px;
    width: 50%;
    font-family: "smooth";
    background-color: white;
    color: black;
    box-shadow: 4px 4px lightgray;
    display:inline-block;
}

HTML: HTML：

<body>

<div class="noselection">

<ul class="topnav">
    <li><a class="active" href="#home"><i class="fa fa-rocket" aria-hidden="true"></i> Play</a></li>
    <li><a href="deposit.php"><i class="fa fa-btc" aria-hidden="true"></i> Deposit</a></li>
    <li><a href="#contact"><i class="fa fa-btc" aria-hidden="true"></i> Withdraw</a></li>
    <li><a href="faucet.php"><i class="fa fa-university" aria-hidden="true"></i>Faucet</a></li>
    <li><a href="#support"><i class="fa fa-life-ring" aria-hidden="true"></i>Help & Support</a></li>
    <?php echo $accountButton; ?>
    <li class='right' id="top-balance"><a href=''></a></li>
</ul>

    <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" onkeydown="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">Payout: 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"><img src="Images/dice.png"> 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>

<?php echo $script; ?>

</body>

UPDATE: Reducing the .balance width to 40% fixed the issue, but how can I now force it up? 更新：将.balance宽度减小到40％可以解决此问题，但是现在如何强制呢？

Answer 1

you are looking for below structure, 您正在寻找以下结构，

what happens here is when you apply fixed width to div and them apply padding and margin so your element width gets increased 这里发生的是当您将固定宽度应用于div并且它们应用了填充和边距时，您的元素宽度会增加

so better you create another child container and assign padding margin over there 因此最好创建另一个子容器并在那儿分配填充边距

 .gamebox, .balance{ width: 50%; float: left; height: 100px; } .gamebox-inner, .balance-inner{ border: 1px solid red; padding: 10px; margin: 10px; background-color: #ddd; }

 <div class="gamebox"> <div class="gamebox-inner"> a </div> </div> <div class="balance"> <div class="balance-inner"> b </div> </div>

Answer 2

Try this code add box-sizing: border-box; 尝试使用以下代码添加box-sizing：border-box; property to both the classes. 这两个类的属性。

CSS CSS

.gamebox, .balance{
box-sizing: border-box;
}

hope this helps.. 希望这可以帮助..

Answer 3

You can try flexbox as follows. 您可以按以下方式尝试flexbox。

<div id="container">
<div class ="first">first</div>
<div class="second">second</div>
</div>
#container {
    width: 200px;
    height: 300px;enter code here
    border: 1px solid black;
    backgroud-color:red;
    display:flex;
}
.first {
  background-color:blue;
  width:50px;
  height:50px;
  flex:1;
}
.second {
  background-color:green;
  width:50px;
  height:50px;
  flex:2;
}

似乎无法让两个要素并存

问题描述

3 个解决方案

解决方案1
0 2017-06-22 01:45:29

解决方案2
0 已采纳 2017-06-22 01:48:24

解决方案3
0 2017-06-22 02:02:33

似乎无法让两个要素并存

问题描述

3 个解决方案

解决方案1 0 2017-06-22 01:45:29

解决方案2 0 已采纳 2017-06-22 01:48:24

解决方案3 0 2017-06-22 02:02:33

解决方案1
0 2017-06-22 01:45:29

解决方案2
0 已采纳 2017-06-22 01:48:24

解决方案3
0 2017-06-22 02:02:33