需要两列堆叠而不是重叠移动答案

【问题标题】：Need two columns to stack rather than overlap for mobile需要两列堆叠而不是重叠移动
【发布时间】：2017-08-09 14:09:51
【问题描述】：

我正在尝试使这两列具有响应性，但无论我尝试什么，它们都会重叠。

任何帮助将不胜感激！

#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>

【问题讨论】：

标签： html css forms responsive-design media-queries

【解决方案1】：

添加一个媒体查询，不仅将宽度设置为 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>

【讨论】：

这是由于浮动。将clear: both 添加到#testimonialbanner 以解决该问题。
完美运行！非常感谢！

【解决方案2】：

使用包装器并将其定义为弹性盒。我删除了部分已过时的边距（我认为）。

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

#minicontact {
  width: 25%;
  margin: 0;
}

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

#miniformtitle {
  margin: 0;
}

<div class="wrapper">
  <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>
  <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>
</div>

【讨论】：

这不会让它堆叠，它只是防止它们重叠。