Question

我无法让.contact-form-container和.contact-information div在全屏模式下对齐。手机效果很好。请查看DEMO并调整预览窗口的大小以查看不需要的结果。

再次感谢

Answer 1

默认情况下，内联块元素在行的基线处对齐。你可以改变：

.contact-form-container {
    vertical-align: top;
}

<强> Demo

Answer 2

您可以float:left;和.contact-form-container添加.contact-information。

您还需要从clearfix移除课程contact-form-container，但请将其保留在.footer-container

这会使它们浮在同一条线上。

demo

Answer 3

你应该尽早关闭顶级div标签，它会像你想要的那样工作

<div class="footer-container clearfix">
  <form action="" method="POST" id="ContactForm" class="contact-form-container clearfix">
  <input id="Name" class="name" name="name" placeholder="Name" type="text"></input>
  <input id="Email" class="email" name="email" placeholder="Email" type="text"></input>
  <textarea id="Message" class="message" name="message" placeholder="Message"></textarea>
  <button type="submit" id="Submit" class="submit">Send</button>
</form>    </div>  
<div class="contact-information">
    <p class="headquarters">Headquarters</p>    
    <p>57507sf RR#215</p>
    <p>Box 311</p>
    <p>Redwater, Alberta, T0A 2W0</p>
    <p>Canada</p>
    <p>(780) 942-299sadfsafa4</p>


<p class="copyright">COPYRIGHT © R&amp;F MILLWORKS 2015</p>     
 </div>

看起来我没有完全理解这个问题。添加float：left到.contact-form-container修复它

内联块div不是顶部对齐的

3 个答案: