[英]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.