响应式文本框布局

Question

是否有人能够就此问题提供一些帮助，

下面附带的

是我的网站的代码，包含两张图片，

第一张图片显示普通桌面网络浏览器中的文本框位置

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

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

非常感谢

<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: 0800 023 4567 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;