调整浏览器大小时如何停止网页div元素的移动

时间：2019-11-19 06:07:23

标签： html css formatting

在我的网页上，每当我调整浏览器大小时，这3个文本输入框就会移动并重叠，从而弄乱了页面。

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>

2 个答案:

答案 0 :(得分：2)

这将不需要任何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>

答案 1 :(得分：0)

其他的都是正确的，对于更具响应性的设计，可以使用引导程序。如果要使用纯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>

相关问题
最新问题