html - 需要两列来堆叠而不是重叠移动

我试图使这两列响应，但是无论我如何尝试，它们都会重叠。

任何帮助，将不胜感激！

#serviceTop{width:48%;margin:0 0 0 160px;}
#minicontact{width:25%;float:right;margin:-525px 155px -5px 0;}
#button4{margin:0 0 0 122px;height:55px;width:145px;border-radius:20px;background-color:#6db9fa;color:#ffffff;font-size:14px;}
#miniformtitle{margin:76px 0 -38px 90px;}

<div id="serviceTop">
<h2>We put time back in your week.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus lacus, vestibulum a augue quis, dignissim venenatis arcu. Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie fermentum sit amet suscipit tortor.</p>
<p>Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie fermentum sit amet suscipit tortor.</p>
<h3>Here to simplify your day!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus lacus, vestibulum a augue quis, dignissim venenatis arcu. Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie fermentum sit amet suscipit tortor.</p>
<p>Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie fermentum sit amet suscipit tortor.</p>
</div>
<p>&nbsp;</p>
<div id="minicontact">
<h3 id="miniformtitle">Get Started</h3>
<form class="contact" action="&lt;?=$_SERVER['REQUEST_URI'];?&gt;#cform1" method="post" name="simp_cont">
<p><br /> <input id="captcha" class="input" style="position: absolute; left: -9999px;" name="captcha" type="text" /><br /> <input id="name" name="fname" type="text" placeholder="NAME" /><br /> <input id="phone" name="phone" type="text" placeholder="PHONE NUMBER" /><br /> <input id="email" name="email" type="text" placeholder="EMAIL ADDRESS" /><br /> <input id="footage" name="footage" type="text" placeholder="ESTIMATED SQUARE FOOTAGE" /><br /> <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea></p>
</form></div>

最佳答案

添加一个媒体查询，该查询不仅将宽度设置为100％，而且还会重置边距：

（注意：根据需要调整媒体查询中的max-width）

#serviceTop {
  width: 48%;
  margin: 0 0 0 160px;
}

#minicontact {
  width: 25%;
  float: right;
  margin: -525px 155px -5px 0;
}

#button4 {
  margin: 0 0 0 122px;
  height: 55px;
  width: 145px;
  border-radius: 20px;
  background-color: #6db9fa;
  color: #ffffff;
  font-size: 14px;
}

#miniformtitle {
  margin: 76px 0 -38px 90px;
}

@media screen and (max-width: 700px) {
  #serviceTop,
  #minicontact {
    width: 100%;
    margin: 0;
  }
  #miniformtitle {
    margin: 0;
  }
}

<div id="serviceTop">
  <h2>We put time back in your week.</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus lacus, vestibulum a augue quis, dignissim venenatis arcu. Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie
    fermentum sit amet suscipit tortor.</p>
  <p>Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie fermentum sit amet suscipit tortor.</p>
  <h3>Here to simplify your day!</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus lacus, vestibulum a augue quis, dignissim venenatis arcu. Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie
    fermentum sit amet suscipit tortor.</p>
  <p>Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie fermentum sit amet suscipit tortor.</p>
</div>
<p>&nbsp;</p>
<div id="minicontact">
  <h3 id="miniformtitle">Get Started</h3>
  <form class="contact" action="&lt;?=$_SERVER['REQUEST_URI'];?&gt;#cform1" method="post" name="simp_cont">
    <p><br /> <input id="captcha" class="input" style="position: absolute; left: -9999px;" name="captcha" type="text" /><br /> <input id="name" name="fname" type="text" placeholder="NAME" /><br /> <input id="phone" name="phone" type="text" placeholder="PHONE NUMBER"
      /><br /> <input id="email" name="email" type="text" placeholder="EMAIL ADDRESS" /><br /> <input id="footage" name="footage" type="text" placeholder="ESTIMATED SQUARE FOOTAGE" /><br /> <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea></p>
  </form>
</div>

关于html - 需要两列来堆叠而不是重叠移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45593104/