时间戳

首页 > 解决方案 > 由于某种原因，我的方块走到了页面底部

html - 由于某种原因，我的方块走到了页面底部

问题描述

我正在使用引导程序，我正在尝试输入一个正方形，但默认情况下，由于某种原因它被放置在页面底部。我需要它位于同一列中的文本框下方。我上面没有 CSS，即使我不使用 bootstrap 并将它放在一个普通的 div 中，它仍然出现在页面底部

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="bootstrap customiser.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        .square {
          height: 50px;
          width: 50px;
          background-color: black;
        }
    </style>
    <style>
        .square2 {
          height: 50px;
          width: 50px;
          background-color: grey;
        }
    </style>
</head>
<body>
<div class="containter">
    <div class="row">
        <div class="col-md-12 text-center">
            <h1>Customiser</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 offset-md-1">
            <img src="label.png">
        </div>
    <div id="labeltext">
        text

    </div>
        
        <div class="col-md-4 offset-md-2 align-items-center">
            <div id="textchanger">
                <input type="text" id="textpicker">
                <input type="button" id="update" value="Click me!" onclick="changetext()"> 
            </div>
        </div>

    </div>

</div>
<div class="square">
    
</div>
<script>
    function changetext() {
        let bruh = document.getElementById('textpicker').value;
        document.getElementById('labeltext').innerHTML = bruh;
    }
</script>
</body>
</html>

在此处输入图像描述

@font-face {
    font-family: 'centra_no2';
    src: url(CentraNo2-Book.ttf);
}

img {
    width: auto;
    height: 450px;
}

body {
    font-family: "centra_no2";
}

#labeltext {
    position: absolute;
    margin-left: 250px;

    margin-top: 225px;
}

#square1{

    display: inline-flex;

}

标签： htmlcssbootstrap-4

解决方案

推荐阅读