html代码定位div出现问题如何按照我的描述定位它

Question

代码有问题我仍然是初学者，蚂蚁试图制作一些“游戏”来好玩，但是后来我尝试用这样的CSS代码在那个棕色的东西上添加另一个div

#energy_and_coins {
    margin: 0 auto;
    margin-top: 1%;
    height: 60px;
    width: 60px;
    border: solid 3px black;
}

网站出现故障，看起来像这样如何修复？完整代码看起来像这样

<!DOCTYPE html>
<html lang="PL-pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" href="images/thunder_icon.png" type="image/x-icon">
    <link rel="stylesheet" href="styles/style.css">

</head>

<body>
    <div id="energy_and_coins">

    </div>
    <div id="upgrade_panel">
        <div id="current_stats">

        </div>


        
        <div id="upgrades_list">
            
        </div>
    </div>
    <div class="center-container">
        <button style="background: url(images/main_click.png)" onclick="GainPower()" class="blinking-btn"></button>
    </div>



    <script src="script.js"></script>
</body>
</html>

body {cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAoVJREFUWEel1z/oV1UYBvCPZQUplbaIOmhDkxBECQ1uopQaOISLEjkYldAgYtRkDYmIghgOTaIogkO6GOIYoRhaDkIQ0WCghUMZqJQWDxzjy8/fvefc+33X+5z3fc777zx3jn6bg5U4jhcq2H/xLTbh1wr2/88J0GdzsQ8fNjr8B28Xwk1HagSexFd4vckbd/Eavm/EqxF4ClfxYqPDlGA17jTiqwSeLfWc1+hwJw7gfiO+SuAlXEQyUbO/sGpI+uOwVoKNOIknatFxDpvxewO2eQp2YA8yDTX7CPvxdw04+b2WgS/wLh6vOL2BLTg/JHhLCb7GmoZSXcGujgWUBXULv81Gri8Dj+EHrGi41R/4BQ9mwYbAT9iNazO/9xFYjG+wvIFADXKvNOipIQReLVswRKa13Dw9cnkIgYzgl3h+yuhZz3tLCR4pUV8JtuNzzJ+CQOqfPlrf9UL2EUjw7IGWJdTFMbV/Bye6AH0EDuIDZBrG2umiD0JkVusjkCc4GVjUsQeS3kzI0x2+M/cbcAnBDiaQA8uwoONsSpPUdimlrPBPa09zbRX3pT4L6iyWzgKKIIkyipbotWkIZK7TJ8/NiBAx8lmZoFr86nPc5+ChVpx8KVPrC8gOuVmN3vDIdPl4Bkfx5gxAuj2qON3fZGNLkPofQxTTpB3Be7XGmzwwlsAbJQMLJ5xFE6xtabxpCUScvF8a8KGviNCMXHZ+dn+zjclAlHKk19aJKN+V5/bH5sgFOIbAEpzBy8XHbXyMQ0ODBz+GQBowN45Uz9hFtKxDiAy2oQTyMEV6p9tjf+KtIskHBx+TgTTgJ0Vc5Pzh8uM6SIpPMwXJ2CtlBK9jG34edfVy6D9c7W8hrYLr7gAAAABJRU5ErkJggg==) 0 0, default;
    margin: 0;
    display: flex;
    height: 100vh;
    width: 186vh;
}

button {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAaxJREFUWEfFlj1LA0EQhp8xMaMWERsRtRBsBIUgfv3/zg8QURBsrLRQERQLHfxYOUiCJHe7s5cLXnuzs8+88+7uCPFPgEMLHCfihr9VWAfuvfHFBrGvbYFPb7JBnAqpvMOUqcCOBSwHQIVd4MK7JgWgFvjwJiviVFgA3r1rUgCLFnjxJusDtIFv75oUQM+CX85c+QvIKIAFgreSfvXLwFPOmqYBOpB3apoGSLV0TJymAbZL5C/a+Aw8lrUmBjBjwe/mVN9VKOCuR+NiAKsW/FdqCqBv0rH9YgAHFjj1JPbEqLAHnLsVyD2CKQgVWsDPvwDEXsjKFjSpQOx1nDqACnNQ/aJOFUCFI+AMqq/01M21ASxVGGzWAicx83me5hRALP+OBa6qAlToAZep01EbIGVS71g2FQAVVoCHVPXJeSCSoGuB14j87sLcgSObVfbfY7y/uWoBVPXfa7xJAVoW+CqTX4V5yJui6yhQOimrsAXceIw3qQJrFrgb3ch77NyvYaSSMQOq0AXecquvcwxLx7S61dcBGDOgCtmj+CQeKEy7PxjVVNgEbutIP1jzC8SEeyEVBqUUAAAAAElFTkSuQmCC) 0 0, default;
}

.blinking-btn {
    width: 356px;
    height: 356px;
    background-size: cover;
    border: solid 2px black;
    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.5);
}

.center-container {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin: auto;
}



#energy_and_coins {
    margin: 0 auto;
    margin-top: 1%;
    height: 60px;
    width: 60px;
    border: solid 3px black;
}

#upgrade_panel {
    margin-top: 5%;
    width: 32%;
    height: 90%;
    border-top: solid 3px black;
    border-right: solid 3px black;
    background-color:  #b7760e;
}

#current_stats {
    margin: 5%;
    height: 80px;
    border: solid 1px black;
    background-color: #754904;
    box-shadow: inset 0px 0px 40px rgba(0, 0, 0, 0.5);
}

#upgrades_list {
    height: 75%;
    border:  solid 2px black;
    border-radius: 5%;
    margin: 10%;
}


I was expecting that the

'''
#energy_and_coins {
margin: 0 auto;
margin-top: 1%;
height: 60px;
width: 60px;
border: solid 3px black;
}
'''

div would be on center and top of the website and the brown thing would be to the left as in the first img

Answer 1

在 html 中尝试将 div#energy_and_coins 放入 div#upgrades_list 中，如下所示：

<div id="upgrade_panel">
    <div id="current_stats"></div>
    <div id="upgrades_list">
      <div id="energy_and_coins"></div>
    </div>
</div>

在 #upgrade_list 的 css 中放置 display:flex 和align-items:center，如下所示：

#upgrades_list {
    height: 75%;
    border:  solid 2px black;
    border-radius: 5%;
    margin: 10%;
    display: flex;
    align-items: center;
}

我希望这有帮助！

html代码定位div出现问题如何按照我的描述定位它

问题描述投票：0回答：1

1个回答

最新问题

html代码定位div出现问题如何按照我的描述定位它

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1