需要兩列堆棧而不是重疊的移動

我試圖使這兩列響應，但無論我嘗試，它們重疊。需要兩列堆棧而不是重疊的移動

任何幫助，將不勝感激！

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

來源

2017-08-09 Jonny Dee

添加媒體查詢，不僅設置寬度爲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>

來源

2017-08-09 14:19:31 Johannes

這是由於浮動。將'clear：both'添加到'＃testimonialbanner'來解決這個問題。 – Johannes

完美運作！非常感謝！ –

用於包裝和將它定義爲一個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>

來源

2017-08-09 14:13:10 Gerard

這不會讓它堆疊，但它只是使它們不會重疊。 –

需要兩列堆棧而不是重疊的移動

回答

相關問題