Question

我试图让这两列反应灵敏，但无论我尝试什么，它们都会重叠。

任何帮助将不胜感激！

＆＃13;

Toolbar

＆＃13;

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

＆＃13;

Answer 1

使用包装器并将其定义为flexbox。我删除了部分过时的遗产（我认为）。

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

Answer 2

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

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

2 个答案: