响应式文本框布局

Question

是否有人能够提供这方面的帮助，

下面附有我的网站的代码，有两个图像，

第一个图像显示普通桌面Web浏览器中的文本框位置，

第二个图像显示移动视图中的文本框，因为您可以看到文本框不会保持相同的大小并向上移动到页面顶部，

我希望整个页面保持桌面外观，即使在移动视图（任何移动设备）中我希望这些白色文本框几乎到达页脚，两个按钮“下一步”和“后退”坐在页脚上方，

非常感谢

<div class="toptext"> 
<h1> GET A QUOTE</h1>
<h2> RETRIEVE A QUOTE</h2>
<h3>NEED HELP OR ADVICE?CALL US <br style>  </h3>
    <h4> 0800 0481804</h4>
    </div>

   <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
 <div class="box"> 

<div id="content">
<img src="10.png" class="images" />
<img src="10000.png" class="images" />
<img src="replacement.png" class="images" />
</div>
</div>
</div>

<div class="box1"> 


<div> <img src="laptop.png" class="laptop"> </div>
<p>The CSS box model is essentially a box that wraps around every HTML 
element. It consists of: borders, padding, margins, and the actual content.
</p>

<div class="bottomtext">Please enter a figure for the number of individual 
laptops/macbooks that you would like to insure in each price range. <br> Where 
you dont want cover with a particular price range, please leave bank.</div>
</div> 





<button type="button" class="button" onclick="alert('Back!')">Back</button>
<button type="button" class="But" onclick="alert('Next!')">Next</button>
<div class="footer">
<p> © Insync Insurance Solutions Ltd 2016 All rights reserved. Mobiru is a 
trading style of Insync Insurance Solutions Ltd which is authorised and 
regulated by the Financial Conduct Authority. Our registered office is Midland 
House, 2 Poole Road, Bournemouth, Dorset BH2 5QY and we are registered in 
England under company number 08810662. Should you have cause to complain, and 
you are not satisfied with our response to your complaint, you may be able to 
refer it to the Financial Ombudsman Service, which can be contacted as f 
follows: The Financial Ombudsman Service Exchange Tower, London, E14 9SR | 
Tel: [phone] or 0300 123 9 123 | www.financial-ombudsman.org.uk </p>
      <img src="Logo-Trans.png" class="logo1">
</div>

 body {
 background-color: black;
 }
 #logo {
 position:absolute;
 left:0;
 top:0;
 }
 h1
 {
  color: white;
  position:absolute;
  right:25rem;
  top:2.5rem;
  font-size: 10px;
  font-family: 'Raleway', sans-serif;
 }
 h2
 {
 color: white;
 position:absolute;
 right:15rem;
 top:2.5rem;
 font-size: 10px;
 font-family: 'Raleway', sans-serif;
 }
 h3
 {
 color: white;
 position:absolute;
 right:2rem;
 top:1.5rem;
 font-size: 7px;
 font-family: 'Raleway', sans-serif;
 }

 h4
 {
 color: white;
 position:absolute;
  right:2rem;
 top:1.5rem;
 font-family: 'Raleway', sans-serif;
 font-size: 17px;
 }

 .footer {
  position: fixed;

 bottom: 0;
 width: 100%;
 height:110px;
 background-color: #333;
 color: white;


 }

img.logo {
height: 100px;
 }
 img.logo1 {
 height: 40px;
 left:3em;

 bottom:2rem;
 position:absolute;
 }

 p {
 font-size: 6px;
 position:fixed;
 bottom:2rem;
 right:15em;
 width:500px;
 max-width: 400px;
 font-family: 'Raleway', sans-serif;
 }

  button {
  background-color: #4CAF50;
  border: none;

  color: white;

  display: inline-block;
  font-size: 16px;

     bottom:7.5rem;
    position: absolute;
    border-radius: 5px;

  position: fixed;
 margin: auto;
 left: 8rem;
 right: 0;
 top: 0;
 bottom: -28rem;
 width: 100px; /* width of button */
 height: 30px;
 }

  Button.But {
background-color: #4CAF50;
 border: none;
 color: white;

  display: inline-block;
  font-size: 16px;

  bottom:7.5rem;
  border-radius: 5px;
  position: fixed;
 margin: auto;
 left: -5rem;
right: 0;
 bottom: -28rem;

 width: 100px; /* width of button */
 height: 30px;


 }
 img.arrow {
 max-height: 40px;
 }

 .box {
 background-color: white;
 max-width:100%;
 height: 150px;
 border-radius: 5px;
 padding:25px;
 margin: 25px;

  }
 .box1 {
 background-color: white;
 max-width:100%;
 height:150px;
 padding: 25px;
 margin: 25px;
 border-radius: 5px;

 }

img.laptop { 

height: 100px;
position: absolute;
left:0px;
right: 0px;
bottom: 12rem;
margin-left: auto;
margin-right: auto; 
}
.bottomtext {
position: absolute;
bottom: 50px;

}

img.textimage
{
height:20px;
left:8rem;
position: absolute;
 font-family: 'Raleway', sans-serif;
}

.images {
display: inline;
margin: 0px;
padding: 0px;
vertical-align:middle;
width:200px;
}
#content {
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 90px;
height: auto;
max-width: auto;
overflow-y: hidden;
overflow-x:auto;
word-wrap:normal;
white-space:nowrap;
height: 50px;
}

Answer 1

你可能正在寻找像@media这样的东西

body {
background-color:black;
color:white;
}
p {
 font-size: 6px;
 position:fixed;
 bottom:2rem;
 right:15em;
 width:500px;
 max-width: 400px;
 font-family: 'Raleway', sans-serif;
 }

.bottomtext {
width:400px;
}

@media screen and (min-width: 550px) {
 .bottomtext {
 width: 200px;
 }
}

<div> <img src="laptop.png" class="laptop"> </div>
<p>The CSS box model is essentially a box that wraps around every HTML 
element. It consists of: borders, padding, margins, and the actual content.
</p>

<div class="bottomtext">Please enter a figure for the number of individual 
laptops/macbooks that you would like to insure in each price range. <br> Where 
you dont want cover with a particular price range, please leave bank.</div>

因此，任何低于宽度550px的东西都将适用。在这种情况下，它将使类底部的宽度为text = 200px;