[英]How to stop my web page div elements moving around when i resize the browser
在我的网页上，每当我调整浏览器的大小时，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>
其他的都是正确的，对于更具响应性的设计，您可以使用引导程序。 如果您打算使用纯 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>
调整 web 浏览器的大小时，如何防止元素/图像移动？
[英]How do I keep my elements/images from moving when I resize my web browser?
当我使用包装div调整窗口大小时，div正在移动吗？
[英]Divs are moving around when I resize the window even with a wrapper div?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.