Question

我在第三个内部有两个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>

这是三个div的CSS

.application {
width: 97%;
margin: 20px 2% 0px 2%;
text-align: center;
display: block;
border: 2px #000000 solid;

}

.contactMeForm {
display: inline-block;
border: 5px #9E9FA1 solid;
border-right: 0px;
width: 49%;
color: #48494B;
text-align: left;
}

.contactMeHelp {
display: inline-block;
border: 5px #9E9FA1 solid;
border-left: 0px;
width: 49%;
color: #48494B;
text-align: right;
}

这就是它目前的样子 http://masterzangetsu.eu/ContactMe/

任何帮助都会很棒

Answer 1

只需添加“float：right;”到.contactMeHelp元素。这应该可以解决问题。

Answer 2

添加

vertical-align: top;

到你的两个div

Answer 3

两个问题：

1。）您没有为每个包含div的float参数设置。将它们设置为left和right取决于它们应该在哪里修复它。

2。）执行上述操作仍会在.application div中留下一些奇怪的块对齐。这是因为它最右边的div的高度没有拉伸到它的父div，你可以通过设置height:100%来实现。

这是一个小提示，显示结果：http://jsfiddle.net/5T3NC/

HTML + CSS，我似乎无法获得两个水平对齐的div来排队

3 个答案: