当我调整浏览器大小时，如何阻止我的网页div元素四处移动

在我的网页上，每当我调整浏览器的大小时，3个文本输入框就会移动并重叠，只会把页面弄得一团糟。

当浏览器处于全屏(正常(时

当浏览器较小(不正常(

我是一名初级程序员，我尝试过许多其他帖子中的解决方案，但同样的事情也发生了。

-当我调整浏览器的大小时，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>

其他都是正确的，为了获得更灵敏的设计，可以使用bootstrap。如果您要使用纯CSS，可以查看Flexbox，它使您能够使用与Bootstrap类似的设计。

我修改了你的代码，你可以用数字把它放在你想要的地方，但你必须明白，当你调整屏幕大小时，尤其是在极端情况下，它会溢出。对于您所拥有的代码，请查看CSS属性vh(视口高度(和vw(视口宽度(以及百分比。代替其他策略，这些CSS属性将使您最接近响应式设计，并且也可以做得很好。

下面的代码只是基于你的代码，你必须稍微处理一下数字，也许可以在其他元素中添加更多的属性，以使其适合你，但你应该能够了解要点。

* {
margin: 0;
padding: 0;
}
#container {
position: relative;
height: 100vh;
width: 100vw;
}					
#img {
float: left;
margin: 10vh 10vw;
padding: 5px;
height: 20vh;
width: auto;
}
#cSolve {
position: absolute;
right: 33%;
top: 66%;
height: 33vh;
width: 25vw;
}
#bSolve {
position: absolute;
right: 66%;
top: 66%;
height: 33vh;
width: 25vw;
}
#aSolve {
position: absolute;
right: 50%;
top: 25%;
height: 33vh;
width: 25vw;
}
h2 {
text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<title>Some Title</title>
</head>
<body>
<div id="container">
<div id ="image">
<img id="img" src="path/to/image.png" alt="theorem" width = "350">
</div>
<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>
<button onclick="solveForC(document.getElementById('ac').value,document.getElementById('bc').value)">Solve</button>
</div>
<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>
<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>
</div>
</body>
</html>

相关内容

最新更新

热门标签：