HTML+；CSS，我似乎无法让两个水平排列的div对齐

我有两个分区在第三个分区内，我希望边界对齐，但当它们相邻时，一个分区莫名其妙地比另一个稍低

<div class="application">
                <div class="contactMeForm">

                        Contact Us
                        Please provide as much information as possible about your query</br>
                        If you are requesting a quote this will help us to better estimate the costs involved.

                    <form name="contactform" method="post" action="send_form_email.php">
                        <table width="450px">
                            <tr>
                                <td valign="top"><label for="first_name">First Name *</label></td>
                                <td valign="top"><input  type="text" name="first_name" maxlength="50" size="30"></td>
                            </tr>
                            <tr>
                                <td valign="top""><label for="last_name">Last Name *</label></td>
                                <td valign="top"><input  type="text" name="last_name" maxlength="50" size="30"></td>
                            </tr>
                            <tr>
                                <td valign="top"><label for="email">Email Address *</label></td>
                                <td valign="top"><input  type="text" name="email" maxlength="80" size="30"></td>
                            </tr>
                            <tr>
                                <td valign="top"><label for="telephone">Telephone Number</label></td>
                                <td valign="top"><input  type="text" name="telephone" maxlength="30" size="30"></td>
                            </tr>
                            <tr>
                                <td valign="top"></td>
                                <td valign="top"><input type="radio" name="enquiry" value="Website Solution Quote">Website Solution Quote</td>
                            </tr>
                            <tr>
                                <td valign="top"><label for="comments">Enquiry Nature *</label></td>
                                <td valign="top"><input type="radio" name="enquiry" value="Mobile Solution Quote">Mobile Solution Quote</td>
                            </tr>
                            <tr>
                                <td valign="top"></td>
                                <td valign="top"><input type="radio" name="enquiry" value="Other">Other</td>
                            </tr>
                            <tr>
                                <td valign="top"> <label for="comments">Comments *</label></td>
                                <td valign="top"><textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea></td>
                            </tr>
                            <tr>
                                <td colspan="2" style="text-align:center"><input type="submit" value="Submit"></td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="contactMeHelp">

                    Extra details on how to fill in the form

                </div>
            </div>

这就是它目前的样子

任何帮助都很好

只需在.contactMeHelp元素中添加一个“float:right；”。这应该可以解决问题。

添加

vertical-align: top;

对于您的两个

div

s

问题：

1.）没有为每个包含的div设置

float

参数。将它们设置为左和右，具体取决于它们应该位于的位置，这将解决问题

2.）执行上述操作仍会在

.application

div中留下一些奇怪的块对齐。这是因为其最右侧div的高度没有延伸到其父div，您可以通过设置

高度：100%

来实现

---

这里有一把小提琴向您展示了结果：

他/她使用的是

内联块

而不是

浮点

，您不需要两者兼而有之。对于#2，这是因为需要清除浮动元素。在浮动元素设置为

clear:both之后，可以使用clearfix或
div
嗯，谢谢你的提示。我以前听说过clearfix这个词，你介意再解释一下你的最后一句话吗？哪个
div
需要设置为
clear:both
？当然，不使用clearfix，您可以做的是在浮动元素下面放置一个空的
div
，如下所示：并将
clear
设置为：
.clear{clear:both；}
这与使用clearfix是一样的，大多数人只会使用clearfix，因为它将
clear:both
应用于css
：在
选择器之后，所以它可以做同样的事情，而不必向HTML添加另一个
div
，但两者都可以
vertical-align: top;