在我的网页上，每当我调整浏览器大小时，三个文本输入框就会移动并重叠，从而使页面混乱。
When The Browser is in full screen (normal)
When The Browser is smaller (not normal)
我是一名初学者程序员，曾尝试过其他许多职位的解决方案，但同样的事情也会发生。
-调整浏览器大小时，h2元素不会受到影响
抱歉，代码太长了。
<!DOCTYPE html>
<html>
<style>
#image
{
position: fixed;
left: 50px;
top: 200px;
}
#cSolve
{
position: fixed;
right: 650px;
top: 150px;
}
#bSolve
{
position: fixed;
right: 800px;
top: 350px;
}
#aSolve
{
position: fixed;
right: 500px;
top: 350px;
}
h2
{
text-align: center;
}
</style>
<div id = "image">
<img src = "i could not put my link here on stackoverflow" width = "350">
</div>
<br> <br>
<div id = "cSolve">
<p> Solve For C: </p>
A legnth: <input type="number" name="ac" id="ac"><br> <br>
B legnth: <input type="number" name="bc" id="bc"><br> <br>
Round to 2 decimal places<input type="checkbox" class="checkboxC"/><br> <br>
<buttononclick="solveForC(document.getElementById('ac').value,document.getElementById('bc').value)"
>Solve</>
</div>
<br><br>
<div id = "bSolve">
<p> Solve For B: </p>
C legnth: <input type="number" name="cb" id="cb"><br> <br>
A legnth: <input type="number" name="ab" id="ab"><br> <br>
Round to 2 decimal places<input type="checkbox" class="checkboxB"/><br> <br>
<button onclick="solveForB(document.getElementById('cb').value,document.getElementById('ab').value)"
>Solve</button>
</div>
<br><br>
<div id = "aSolve">
<p> Solve For A: </p>
C legnth: <input type="number" name="ca" id="ca"><br> <br>
A legnth: <input type="number" name="ba" id="ba"><br> <br>
Round to 2 decimal places<input type="checkbox" class="checkboxA"/><br> <br>
<button onclick="solveForA(document.getElementById('ca').value,document.getElementById('ba').value)"
>Solve</button>
</div>
</body>
最佳答案
这将不需要任何css这只是引导程序类，并且响应迅速，只需在img标记中添加图像路径即可。
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<br><br>
<center><h1>Pythagoras Theorem Calculator</h1></center>
<br><br>
<br><br>
<div class="col-lg-12 col-md-12 row">
<div class="col-md-3">
<img src="img.png" class="img-responsive" style="height:200px !important; width:100%;">
</div>
<div class="col-md-6 col-sm-12">
<center>
<p> Solve For C: </p>
A legnth: <input type="number" name="ac" id="ac"><br> <br>
B legnth: <input type="number" name="bc" id="bc"><br> <br>
Round to 2 decimal places<input type="checkbox" class="checkboxC"/><br> <br>
<button onclick="solveForC(document.getElementById('ac').value,document.getElementById('bc').value)">Solve</button>
</center>
</div>
</div>
<div class="col-lg-12 col-md-12">
<div class="col-lg-6 col-md-6 col-sm-12"><center>
<p> Solve For B: </p>
C legnth: <input type="number" name="cb" id="cb"><br> <br>
A legnth: <input type="number" name="ab" id="ab"><br> <br>
Round to 2 decimal places<input type="checkbox" class="checkboxB"/><br> <br>
<button onclick="solveForB(document.getElementById('cb').value,document.getElementById('ab').value)"
>Solve</button>
</center></div>
<div class="col-lg-6 col-md-6 col-sm-12"><center>
<p> Solve For A: </p>
C legnth: <input type="number" name="ca" id="ca"><br> <br>
A legnth: <input type="number" name="ba" id="ba"><br> <br>
Round to 2 decimal places<input type="checkbox" class="checkboxA"/><br> <br>
<button onclick="solveForA(document.getElementById('ca').value,document.getElementById('ba').value)"
>Solve</button>
</center></div>
</div>
</body>关于html - 调整浏览器大小时如何停止网页div元素的移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58927638/